POC react router 4

package.json

@@ -16,7 +16,7 @@
   },
   "homepage": "https://github.com/nytm/wf-kyt-starter-universal#readme",
   "kyt": {
-    "version": "^0.2.0"
+    "version": "^0.3.0"
   },
   "dependencies": {
     "compression": "^1.6.2",
@@ -25,6 +25,6 @@
     "react": "^15.3.0",
     "react-addons-test-utils": "^15.3.0",
     "react-dom": "^15.3.0",
-    "react-router": "^2.6.1"
+    "react-router": "^4.0.0-alpha.5"
   }
 }

src/client/Root.js

@@ -1,13 +1,14 @@
 
 import React from 'react';
-import Router from 'react-router/lib/Router';
-import browserHistory from 'react-router/lib/browserHistory';
-import routes from '../routes';
+import { BrowserRouter } from 'react-router';
+import App from '../components/App';
 
 // We need a Root component for React Hot Loading.
 function Root() {
   return (
-    <Router history={browserHistory} routes={routes} />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   );
 }
 

src/components/App/index.js

@@ -1,9 +1,11 @@
 
-import React, { PropTypes } from 'react';
-import Link from 'react-router/lib/Link';
+import React from 'react';
+import { Link, Match, Miss } from 'react-router';
+import NoMatch from '../NoMatch';
 import styles from './styles.scss';
+import routes from './routes';
 
-function App({ children }) {
+function App() {
   return (
     <div>
       <i className={styles.logo} />
@@ -16,14 +18,13 @@ function App({ children }) {
         </li>
       </ul>
       <div className={styles.content}>
-        {children}
+        {routes.map((route, i) => (
+          <Match key={i} {...route} />
+        ))}
+        <Miss component={NoMatch} />
       </div>
     </div>
   );
 }
 
-App.propTypes = {
-  children: PropTypes.node,
-};
-
 export default App;

src/components/App/routes.js

@@ -0,0 +1,14 @@
+
+import Home from '../Home';
+import Tools from '../Tools';
+
+const routes = [{
+  exactly: true,
+  pattern: '/',
+  component: Home,
+}, {
+  pattern: '/tools',
+  component: Tools,
+}];
+
+export default routes;

src/components/NoMatch/index.js

@@ -0,0 +1,10 @@
+
+import React from 'react';
+
+function NoMatch() {
+  return (
+    <h3>No match for <code>{location.pathname}</code></h3>
+  );
+}
+
+export default NotMatch;

src/server/index.js

@@ -4,11 +4,9 @@ import compression from 'compression';
 import path from 'path';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import RouterContext from 'react-router/lib/RouterContext';
-import createMemoryHistory from 'react-router/lib/createMemoryHistory';
-import match from 'react-router/lib/match';
+import { ServerRouter, createServerRenderContext } from 'react-router';
+import App from '../components/App';
 import template from './template';
-import routes from '../routes';
 
 const clientAssets = require(KYT.ASSETS_MANIFEST); // eslint-disable-line import/no-dynamic-require
 const app = express();
@@ -24,25 +22,32 @@ app.use(express.static(path.join(process.cwd(), KYT.PUBLIC_DIR)));
 
 // Setup server side routing.
 app.get('*', (request, response) => {
-  const history = createMemoryHistory(request.originalUrl);
-
-  match({ routes, history }, (error, redirectLocation, renderProps) => {
-    if (error) {
-      response.status(500).send(error.message);
-    } else if (redirectLocation) {
-      response.redirect(302, `${redirectLocation.pathname}${redirectLocation.search}`);
-    } else if (renderProps) {
-      // When a React Router route is matched then we render
-      // the components and assets into the template.
-      response.status(200).send(template({
-        root: renderToString(<RouterContext {...renderProps} />),
-        jsBundle: clientAssets.main.js,
-        cssBundle: clientAssets.main.css,
-      }));
+  const context = createServerRenderContext();
+  let markup = renderToString(
+    <ServerRouter location={request.url} context={context}>
+      <App />
+    </ServerRouter>
+  );
+  const result = context.getResult();
+  if (result.redirect) {
+    response.redirect(302, `${result.redirect.pathname}${result.redirect.search}`);
+  } else {
+    if (result.missed) {
+      response.status(404);
+      markup = renderToString(
+        <ServerRouter location={request.url} context={context}>
+          <App />
+        </ServerRouter>
+      );
     } else {
-      response.status(404).send('Not found');
+      response.status(200);
     }
-  });
+    response.send(template({
+      root: markup,
+      jsBundle: clientAssets.main.js,
+      cssBundle: clientAssets.main.css,
+    }));
+  }
 });
 
 app.listen(parseInt(KYT.SERVER_PORT, 10));