remarkablemark · remarkablemark · Aug 2, 2017 · Jul 26, 2017 · Jul 26, 2017 · Jul 28, 2017
diff --git a/client.js b/client.js
@@ -1,15 +1,18 @@
 var ReactDOM = require('react-dom');
 var React = require('react');
-var routes = require('./routes/routes.jsx');
 var Redux = require('redux');
 var Provider = require('react-redux').Provider;
+var BrowserRouter = require('react-router-dom').BrowserRouter;
+var App = require('./views/App.jsx').default;
 
 function reducer(state) { return state; }
 
 var store = Redux.createStore(reducer, window.PROPS);
 
 ReactDOM.render(
     <Provider store={store}>
-        {routes}
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
     </Provider>, document
 );
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^15.0.2",
     "react-redux": "^4.4.6",
     "react-router": "^2.8.1",
+    "react-router-dom": "^4.1.2",
     "redux": "^3.6.0",
     "webpack": "^1.13.1"
   },

diff --git a/routes/index.jsx b/routes/index.jsx
@@ -1,31 +1,33 @@
 var router = require('express').Router();
 var React = require('react');
 var ReactDOMServer = require('react-dom/server');
-var ReactRouter = require('react-router');
+var StaticRouter = require('react-router-dom').StaticRouter;
 var Redux = require('redux');
 var Provider = require('react-redux').Provider;
+var App = require('../views/App.jsx').default;
 
 function reducer(state) { return state; }
 
 router.get('*', function(request, response) {
     var initialState = { title: 'Universal React' };
     var store = Redux.createStore(reducer, initialState);
 
-    ReactRouter.match({
-        routes: require('./routes.jsx'),
-        location: request.url
-    }, function(error, redirectLocation, renderProps) {
-        if (renderProps) {
-            var html = ReactDOMServer.renderToString(
-                <Provider store={store}>
-                    <ReactRouter.RouterContext {...renderProps} />
-                </Provider>
-            );
-            response.send(html);
-        } else {
-            response.status(404).send('Not Found');
-        }
-    });
+    var context = {};
+    var html = ReactDOMServer.renderToString(
+        <Provider store={store}>
+            <StaticRouter location={request.url} context={context}>
+                <App />
+            </StaticRouter>
+        </Provider>
+    );
+
+    if (context.status >= 400) {
+        response.status(context.status).send(html);
+    } else if (context.url) {
+        response.redirect(context.status, context.url);
+    } else {
+        response.send(html);
+    }
 });
 
 module.exports = router;
diff --git a/routes/routes.jsx b/routes/routes.jsx
diff --git a/views/App.jsx b/views/App.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Layout from './Layout.jsx'
+import { Route, Switch } from 'react-router-dom'
+
+import Index from './Index.jsx'
+import About from './About.jsx'
+import NotFound from './NotFound.jsx'
+
+export default function App() {
+    return (
+        <Layout>
+            <Switch>
+                <Route exact path='/' component={Index} />
+                <Route path='/about' component={About} />
+                <Route component={NotFound} />
+            </Switch>
+        </Layout>
+    );
+}
diff --git a/views/Layout.jsx b/views/Layout.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 class Layout extends React.Component {
@@ -11,7 +11,7 @@ class Layout extends React.Component {
         alert(this.props.custom.title);
     }
     render() {
-        const { custom } = this.props;
+        const { custom } = this.props
         return (
             <html>
                 <head>
@@ -47,4 +47,4 @@ const wrapper = connect(
     }
 );
 
-export default wrapper(Layout);
+module.exports = wrapper(Layout);
diff --git a/views/NotFound.jsx b/views/NotFound.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+
+export default function NotFound(props) {
+    return (
+        <Route render={function(props) {
+            if (props.staticContext) {
+                props.staticContext.status = 404;
+            }
+            return (
+                <p>
+                    Current: <strong>404 Not Found</strong>
+                </p>
+            );
+        }} />
+    );
+}