Upgrade react/react-dom to 15.6.1 and react-router to 4.1.1

package.json

@@ -99,14 +99,15 @@
     "isomorphic-fetch": "^2.2.1",
     "join-classnames": "^1.0.0",
     "npm-run-all": "^4.0.1",
-    "react": "^15.0.1",
-    "react-dom": "^15.0.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
     "react-helmet": "^5.0.3",
     "react-redux": "^5.0.2",
-    "react-router": "^3.0.2",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.1",
     "react-router-redux": "^4.0.7",
     "redux": "^3.4.0",
     "redux-thunk": "^2.0.1",
     "string-hash": "^1.1.0"
   }
-}
+}

src/app/_client.js

@@ -1,18 +1,18 @@
-import { Router, browserHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import {render} from 'react-dom';
 import {Provider} from 'react-redux';
 
 import routes from './routes.js';
 import getStore from './store.js';
 
 const store = getStore();
-const history = syncHistoryWithStore(browserHistory, store)
 
 render(
     <Provider store={store}>
-        <Router history={history} routes={routes} />
+        <BrowserRouter>
+            {routes}
+        </BrowserRouter>        
     </Provider>,
 
     document.getElementById('app')

src/app/_server.js

@@ -1,59 +1,85 @@
 import React from 'react';
 import docTemplate from './HTML.js';
 import { renderToString } from 'react-dom/server';
-import { match, RouterContext } from 'react-router';
+import { StaticRouter } from 'react-router';
 import { Provider } from 'react-redux';
 import Helmet from 'react-helmet';
 import {encode} from '@tuxsudo/b64';
 import routes from './routes.js';
 import getStore from './store.js';
 import { minify } from 'html-minifier';
-import { resolve } from './hocs/ss-resolve';
+// import { resolve } from './hocs/ss-resolve';
 import {selectHTTPResponseCode} from './store.js';
 
 import * as env from './env.js';
 
 
 export default (req, res, next) => {
-    match({ routes, location: req.url }, (err, redirect, props) => {
-
-        if (err) {
-            return next(err);
-
-        } else if (redirect) {
-            res.redirect(redirect.pathname + redirect.search)
-
-        } else if (props) {
-            const store = getStore();
-
-            resolve(props, store)
-                .then(() => {
-                    const initialState = store.getState();
-                    const httpStatus = selectHTTPResponseCode(initialState);
-                    const opaqueStateString = encode(JSON.stringify(initialState));
-
-                    const content = renderToString(
-                        <Provider store={store}>
-                            <RouterContext {...props} />
-                        </Provider>
-                    );
-
-                    res.status(httpStatus).send(
-                        minify(
-                            docTemplate({
-                                ...(Helmet.rewind()),
-                                content,
-                                initialState: opaqueStateString,
-                                env,
-                                base_path: env.APP_WEB_BASE_PATH
-                            }),
-                            { collapseWhitespace: true, removeAttributeQuotes: true }
-                        )
-                    );
-                }).catch(next);
-
-        } else {
-            res.status(404).send('Not Found')
-        }
-    })
+    const store = getStore();
+
+    const content = renderToString(
+        <StaticRouter context={{}} location={req.url}>
+            <Provider store={store}>
+                {routes}
+            </Provider>
+        </StaticRouter>
+    )
+
+    const initialState = store.getState();
+    const httpStatus = selectHTTPResponseCode(initialState);
+    const opaqueStateString = encode(JSON.stringify(initialState));
+
+    res.status(httpStatus).send(
+        minify(
+            docTemplate({
+                ...(Helmet.rewind()),
+                content,
+                initialState: opaqueStateString,
+                env,
+                base_path: env.APP_WEB_BASE_PATH
+            }),
+            { collapseWhitespace: true, removeAttributeQuotes: true }
+        )
+    );
+    // match({ routes, location: req.url }, (err, redirect, props) => {
+
+    //     if (err) {
+    //         return next(err);
+
+    //     } else if (redirect) {
+    //         res.redirect(redirect.pathname + redirect.search)
+
+    //     } else if (props) {
+    //         const store = getStore();
+
+    //         resolve(props, store)
+    //             .then(() => {
+    //                 const initialState = store.getState();
+    //                 const httpStatus = selectHTTPResponseCode(initialState);
+    //                 const opaqueStateString = encode(JSON.stringify(initialState));
+
+    //                 const content = renderToString(
+    //                     <Provider store={store}>
+    //                         <RouterContext {...props} />
+    //                     </Provider>
+    //                 );
+
+    //                 res.status(httpStatus).send(
+    //                     minify(
+    //                         docTemplate({
+    //                             ...(Helmet.rewind()),
+    //                             content,
+    //                             initialState: opaqueStateString,
+    //                             env,
+    //                             base_path: env.APP_WEB_BASE_PATH
+    //                         }),
+    //                         { collapseWhitespace: true, removeAttributeQuotes: true }
+    //                     )
+    //                 );
+    //             }).catch(next);
+
+    //     } else {
+    //         res.status(404).send('Not Found')
+    //     }
+    // })
 }

src/app/components/SiteHeader/SiteHeader.js

@@ -3,14 +3,14 @@ import style from './SiteHeader.css';
 import SiteNav from '../SiteNav/SiteNav';
 import classes from 'join-classnames';
 import logo from './logo-placeholder.svg';
-import {IndexLink} from 'react-router';
+import {Link} from 'react-router-dom';
 
 export default ({homelink="/", links = [], className=""}) => (
     <header className={classes(style.header, className)}>
-        <IndexLink to={homelink} className={style.brand}>
+        <Link to={homelink} className={style.brand}>
             <img className={style.logo} src={logo} alt="My Brand" />
             <span>React Starter</span>
-        </IndexLink>
+        </Link>
         <SiteNav className={style.nav} links={links} />
     </header>
 );

src/app/components/SiteNav/SiteNav.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './SiteNav.css';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import classes from 'join-classnames';
 
 export default ({links=[], className=""}) => (

src/app/routes.js

@@ -1,15 +1,20 @@
 import React from 'react';
-import { Route, IndexRoute } from 'react-router';
+import { Route, Switch } from 'react-router-dom';
 import App from './containers/app.js';
 import Home from './containers/home.js';
 import NotFound from './containers/not-found.js';
 import {APP_WEB_BASE_PATH} from './env.js';
 
 const routes = (
-    <Route path={`${APP_WEB_BASE_PATH||'/'}`} component={App} >
-        <IndexRoute component={Home} />
-        <Route path="*" component={NotFound} />
-    </Route>
+    <Route
+        path="/"
+        render={props => (
+            <Switch>
+                <Route exact path="/" component={Home} />
+                <Route path="*" component={NotFound} />
+            </Switch>
+        )}
+    />
 );
 
 export default routes;