react router version 4 not showing anything

I think that I am doing something wrong with my React router. I am a beginner to React/Redux so any help is really appreciated. It could also be how I configured webpack, but my front end is showing nothing, but I am not getting any errors at all. I'm not sure what the problem is, but my server starts, is able to populate mock data, and webpack compiles, so I think the backend works.

I'm so sorry for the wall of code but I really have no idea where I'm going wrong and I am a huge newbie to setup on this. This is definitely the longest post I've ever written so I appreciate anyone taking a look at it.

My client/src/routes:

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

import HomePage from './components/home/HomePage';  
import { Layout } from './components/Layout';  

export const App = () => (
  <Layout>
    <Switch>
      <Route exact path="/" component={HomePage} />
    </Switch>
  </Layout>
);

export default App;

client/src/Homepage.js:

import React from 'react';
import { Link } from 'react-router-dom';

class HomePage extends React.Component {
  render() {
    return (
      <div id="main">
        <h1>Hello</h1>
        <p>World</p>
      </div>
    );
  }
}

export default HomePage;

client/src/Layout.js:

import React from 'react';
import { Link } from 'react-router-dom';

export const Layout = props => (
  <div className="app-container">
    <header>
      <Link to="/">
      </Link>
    </header>
    <div className="app-content">{props.children}</div>
    <footer>
    </footer>
  </div>
);

export default Layout;

client/src/App.jsx:

import React from 'react';
import { Provider } from 'react-redux';
import configureStore from '../store/Store';  
import { syncHistoryWithStore } from 'react-router-redux';
import routes from '../routes';
import { BrowserRouter as Router } from 'react-router-dom'

const store = configureStore();

export default class AppRoutes extends React.Component {
  render() {
    return (
        <Provider store={store}>
          <Router routes={routes} />
        </Provider>
    );
  }
}

client/src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import AppRoutes from './startup/App';

ReactDOM.render(
  <Router>
    <AppRoutes />
  </Router>,
  document.getElementById('main')
);

server/views/index.ejs:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buddie!</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="main"><%- markup -%></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

server/app.js:

/* eslint no-console: "off"*/

import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter as Router } from 'react-router-dom';
import { App } from '../client/src/startup/App';

const app = new Express();
const server = new Server(app);
const routes = require('../server/routes/index');

// use ejs templates
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, 'static')));

app.use('/api/v1', routes)

// universal routing and rendering
app.get('*', (req, res) => {
  let markup = '';
  let status = 200;

  if (process.env.UNIVERSAL) {
    const context = {};
    markup = renderToString(
      <Router location={req.url} context={context}>
        <App />
      </Router>,
    );

    // context.url will contain the URL to redirect to if a <Redirect> was used
    if (context.url) {
      return res.redirect(302, context.url);
    }

    if (context.is404) {
      status = 404;
    }
  }

  return res.status(status).render('index', { markup });
});

// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, (err) => {
  if (err) {
    return console.error(err);
  }
  return console.info(
    `
      Server running on http://localhost:${port} [${env}]
      Universal rendering: ${process.env.UNIVERSAL ? 'enabled' : 'disabled'}
    `);
});

webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './client/src/index.js',
  output: {
    path: path.join(__dirname, 'server', 'static', 'js'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  devServer: {
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [ 'babel-loader' ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

package.json scripts:

  "scripts": {
    "start": "npm run build:dev && babel-node server/app.js",
    "start:dev": "export NODE_ENV=development && npm run build:dev && nodemon --exec babel-node -- src/server.js",
    "start:universal": "export UNIVERSAL=true && npm run start",
    "start:dev:universal": "export NODE_ENV=development && export UNIVERSAL=true && npm run start:dev",
    "build": "NODE_ENV=production webpack -p",
    "build:dev": "webpack -d",
    "build:dev:watch": "webpack -d --watch"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-polyfill": "^6.23.0",
    "babel-preset-node6": "^11.0.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.17.2",
    "chalk": "^1.1.3",
    "classnames": "^2.2.5",
    "concurrently": "^3.4.0",
    "debug": "^2.6.8",
    "ejs": "^2.5.6",
    "express": "^4.15.3",
    "immutable": "^3.8.1",
    "jsx-loader": "^0.13.2",
    "morgan": "^1.8.2",
    "node-jsx": "^0.13.3",
    "nodemon": "^1.11.0",
    "normalizr": "^3.2.3",
    "pg": "^6.2.4",
    "react": "^15.6.1",
    "react-addons-test-utils": "15.0.2",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "^1.0.7",
    "react-slick": "^0.14.11",
    "redux": "^3.7.0",
    "redux-logger": "^3.0.6",
    "redux-mock-store": "1.0.2",
    "redux-thunk": "^2.2.0",
    "sequelize": "^4.1.0",
    "sequelize-cli": "^2.7.0",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5",
    "yargs": "^8.0.2"
  },
  "proxy": "http://localhost:8000"

回答1:

In your src/client/App.js file, I noticed you're importing syncHistoryWithStore from react-router-redux. I'm fairly confident RR4 and the old version of react-router-redux are not compatible with one another. The new version installed with @next does not contain syncHistoryWithStore.

This might be your issue.

回答2:

Just noticed something in this code block

if (process.env.UNIVERSAL) {
const context = {};
markup = renderToString(
  <Router location={req.url} context={context}>
    <App />
  </Router>,
);

// context.url will contain the URL to redirect to if a <Redirect> was used
if (context.url) {
  return res.redirect(302, context.url);
}

if (context.is404) {
  status = 404;
}

}

You are assigning an empty object to context, passing an empty context to your<Router />and then checking for context.url and context.is404, which are both going to be undefinedeverytime you check them! Maybe you meant context = {...context} ? Really unsure whether this affects rendering (pretty sure it does not) but it's worth mentioning.

回答3:

If you are not running this code as universal, then it will never update the markup and it will always be empty hence will not print anything.

One small correction in your code: in index.ejs