remarkablemark · moshie · Mar 15, 2017 · Mar 15, 2017 · Apr 18, 2017
diff --git a/client.js b/client.js
@@ -1,15 +1,17 @@
 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;
 
 function reducer(state) { return state; }
 
 var store = Redux.createStore(reducer, window.PROPS);
 
 ReactDOM.render(
     <Provider store={store}>
-        {routes}
+        <BrowserRouter>
+            {require('./views/app.jsx')}
+        </BrowserRouter>
     </Provider>, document
 );
diff --git a/package.json b/package.json
@@ -17,21 +17,22 @@
     "tutorial"
   ],
   "dependencies": {
-    "babel-core": "^6.9.0",
-    "babel-loader": "^6.2.4",
-    "babel-preset-react": "^6.5.0",
-    "babel-register": "^6.9.0",
-    "express": "^4.13.4",
-    "react": "^15.0.2",
-    "react-dom": "^15.0.2",
-    "react-redux": "^4.4.6",
-    "react-router": "^2.8.1",
-    "redux": "^3.6.0",
-    "webpack": "^1.13.1"
+    "babel-core": "6.9.0",
+    "babel-loader": "6.2.4",
+    "babel-preset-react": "6.5.0",
+    "babel-register": "6.9.0",
+    "express": "4.13.4",
+    "react": "15.0.2",
+    "react-dom": "15.0.2",
+    "react-redux": "4.4.6",
+    "react-router": "4.0.0",
+    "react-router-dom": "4.0.0",
+    "redux": "3.6.0",
+    "webpack": "1.13.1"
   },
   "devDependencies": {
-    "nodemon": "^1.11.0",
-    "npm-run-all": "^3.1.2"
+    "nodemon": "1.11.0",
+    "npm-run-all": "3.1.2"
   },
   "private": true,
   "license": "MIT"

diff --git a/routes/index.jsx b/routes/index.jsx
@@ -1,7 +1,7 @@
 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').StaticRouter;
 var Redux = require('redux');
 var Provider = require('react-redux').Provider;
 
@@ -11,21 +11,22 @@ 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}>
+                {require('../views/app.jsx')}
+            </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/Layout.jsx b/views/Layout.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var Link = require('react-router').Link;
+var Link = require('react-router-dom').Link;
 var connect = require('react-redux').connect;
 
 var Layout = React.createClass({

diff --git a/views/NotFound.jsx b/views/NotFound.jsx
@@ -0,0 +1,17 @@
+var React = require('react');
+var Route = require('react-router-dom').Route;
+
+module.exports = function NotFound(props) {
+    return (
+        <Route render={function(props) {
+            if (props.staticContext) {
+                props.staticContext.status = 404;
+            }
+            return (
+                <p>
+                    Current: <strong>404 Not Found</strong>
+                </p>
+            );
+        }} />
+    );
+}
diff --git a/views/app.jsx b/views/app.jsx
@@ -0,0 +1,12 @@
+var React = require('react');
+var ReactRouter = require('react-router-dom');
+var Route = ReactRouter.Route;
+var Layout = require('./Layout.jsx');
+
+module.exports = (
+    <Layout>
+        <Route exact path='/' component={require('./Index.jsx')} />
+        <Route path='/about' component={require('./About.jsx')} />
+        <Route component={require('./NotFound.jsx')} />
+    </Layout>
+);