Use react-router; client- and server side rendering

package.json

@@ -33,7 +33,7 @@
     "pretty-error": "2.0.0",
     "react": "0.14.7",
     "react-dom": "0.14.7",
-    "react-routing": "0.0.7",
+    "react-router": "2.0.0-rc5",
     "source-map-support": "0.4.0",
     "whatwg-fetch": "0.11.0"
   },

src/client.js

@@ -8,10 +8,13 @@
  */
 
 import 'babel-polyfill';
-import ReactDOM from 'react-dom';
+import React from 'react';
+import { match, Router } from 'react-router';
+import { render } from 'react-dom';
 import FastClick from 'fastclick';
-import Router from './routes';
+import routes from './routes';
 import Location from './core/Location';
+import ContextHolder from './core/ContextHolder';
 import { addEventListener, removeEventListener } from './core/DOMUtils';
 
 let cssContainer = document.getElementById('css');
@@ -41,59 +44,58 @@ const context = {
 // rendering, as it was already sent by the Html component.
 let trackPageview = () => (trackPageview = () => window.ga('send', 'pageview'));
 
-function render(state) {
-  Router.dispatch(state, (newState, component) => {
-    ReactDOM.render(component, appContainer, () => {
-      // Restore the scroll position if it was saved into the state
-      if (state.scrollY !== undefined) {
-        window.scrollTo(state.scrollX, state.scrollY);
-      } else {
-        window.scrollTo(0, 0);
-      }
-
-      trackPageview();
-
-      // Remove the pre-rendered CSS because it's no longer used
-      // after the React app is launched
-      if (cssContainer) {
-        cssContainer.parentNode.removeChild(cssContainer);
-        cssContainer = null;
-      }
-    });
-  });
-}
-
 function run() {
-  let currentLocation = null;
-  let currentState = null;
+  const scrollOffsets = new Map();
+  let currentScrollOffset = null;
 
   // Make taps on links and buttons work fast on mobiles
   FastClick.attach(document.body);
 
-  // Re-render the app when window.location changes
   const unlisten = Location.listen(location => {
-    currentLocation = location;
-    currentState = Object.assign({}, location.state, {
-      path: location.pathname,
-      query: location.query,
-      state: location.state,
-      context,
-    });
-    render(currentState);
+    const locationId = location.pathname + location.search;
+    if (!scrollOffsets.get(locationId)) {
+      scrollOffsets.set(locationId, Object.create(null));
+    }
+    currentScrollOffset = scrollOffsets.get(locationId);
+    // Restore the scroll position if it was saved
+    if (currentScrollOffset.scrollY !== undefined) {
+      window.scrollTo(currentScrollOffset.scrollX, currentScrollOffset.scrollY);
+    } else {
+      window.scrollTo(0, 0);
+    }
+
+    trackPageview();
+  });
+
+  const { pathname, search, hash } = window.location;
+  const location = `${pathname}${search}${hash}`;
+
+  match({ routes, location }, (error, redirectLocation, renderProps) => {
+    render(
+      <ContextHolder context={context}>
+        <Router {...renderProps} children={routes} history={Location} />
+      </ContextHolder>,
+      appContainer
+    );
+    // Remove the pre-rendered CSS because it's no longer used
+    // after the React app is launched
+    if (cssContainer) {
+      cssContainer.parentNode.removeChild(cssContainer);
+      cssContainer = null;
+    }
   });
 
-  // Save the page scroll position into the current location's state
+  // Save the page scroll position
   const supportPageOffset = window.pageXOffset !== undefined;
   const isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
   const setPageOffset = () => {
-    currentLocation.state = currentLocation.state || Object.create(null);
     if (supportPageOffset) {
-      currentLocation.state.scrollX = window.pageXOffset;
-      currentLocation.state.scrollY = window.pageYOffset;
+      currentScrollOffset.scrollX = window.pageXOffset;
+      currentScrollOffset.scrollY = window.pageYOffset;
     } else {
-      currentLocation.state.scrollX = isCSS1Compat ?
+      currentScrollOffset.scrollX = isCSS1Compat ?
         document.documentElement.scrollLeft : document.body.scrollLeft;
-      currentLocation.state.scrollY = isCSS1Compat ?
+      currentScrollOffset.scrollY = isCSS1Compat ?
         document.documentElement.scrollTop : document.body.scrollTop;
     }
   };

src/components/App/App.js

@@ -8,7 +8,6 @@
  */
 
 import React, { Component, PropTypes } from 'react';
-import emptyFunction from 'fbjs/lib/emptyFunction';
 import s from './App.scss';
 import Header from '../Header';
 import Feedback from '../Feedback';
@@ -17,36 +16,16 @@ import Footer from '../Footer';
 class App extends Component {
 
   static propTypes = {
-    context: PropTypes.shape({
-      insertCss: PropTypes.func,
-      onSetTitle: PropTypes.func,
-      onSetMeta: PropTypes.func,
-      onPageNotFound: PropTypes.func,
-    }),
     children: PropTypes.element.isRequired,
     error: PropTypes.object,
   };
 
-  static childContextTypes = {
-    insertCss: PropTypes.func.isRequired,
-    onSetTitle: PropTypes.func.isRequired,
-    onSetMeta: PropTypes.func.isRequired,
-    onPageNotFound: PropTypes.func.isRequired,
+  static contextTypes = {
+    insertCss: PropTypes.func,
   };
 
-  getChildContext() {
-    const context = this.props.context;
-    return {
-      insertCss: context.insertCss || emptyFunction,
-      onSetTitle: context.onSetTitle || emptyFunction,
-      onSetMeta: context.onSetMeta || emptyFunction,
-      onPageNotFound: context.onPageNotFound || emptyFunction,
-    };
-  }
-
   componentWillMount() {
-    const { insertCss } = this.props.context;
-    this.removeCss = insertCss(s);
+    this.removeCss = this.context.insertCss(s);
   }
 
   componentWillUnmount() {

src/components/Footer/Footer.js

@@ -10,7 +10,7 @@
 import React, { Component } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Footer.scss';
-import Link from '../Link';
+import { Link } from 'react-router';
 
 class Footer extends Component {
 

src/components/Header/Header.js

@@ -10,7 +10,7 @@
 import React, { Component } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Header.scss';
-import Link from '../Link';
+import { IndexLink } from 'react-router';
 import Navigation from '../Navigation';
 
 class Header extends Component {
@@ -20,10 +20,10 @@ class Header extends Component {
       <div className={s.root}>
         <div className={s.container}>
           <Navigation className={s.nav} />
-          <Link className={s.brand} to="/">
+          <IndexLink className={s.brand} to="/">
             <img src={require('./logo-small.png')} width="38" height="38" alt="React" />
             <span className={s.brandTxt}>Your Company</span>
-          </Link>
+          </IndexLink>
           <div className={s.banner}>
             <h1 className={s.bannerTitle}>React</h1>
             <p className={s.bannerDesc}>Complex web apps made easy</p>

src/components/Navigation/Navigation.js

@@ -11,7 +11,7 @@ import React, { Component, PropTypes } from 'react';
 import cx from 'classnames';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Navigation.scss';
-import Link from '../Link';
+import { Link } from 'react-router';
 
 class Navigation extends Component {
 

src/core/ContextHolder.js

@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react';
+import emptyFunction from 'fbjs/lib/emptyFunction';
+
+class ContextHolder extends React.Component {
+
+  static propTypes = {
+    context: PropTypes.shape({
+      insertCss: PropTypes.func,
+      onSetMeta: PropTypes.func,
+      onPageNotFound: PropTypes.func,
+    }),
+    children: PropTypes.element.isRequired,
+  };
+
+  static childContextTypes = {
+    insertCss: PropTypes.func,
+    onSetTitle: PropTypes.func,
+    onSetMeta: PropTypes.func,
+    onPageNotFound: PropTypes.func,
+  };
+
+  getChildContext() {
+    const context = this.props.context;
+    return {
+      insertCss: context.insertCss || emptyFunction,
+      onSetTitle: context.onSetTitle || emptyFunction,
+      onSetMeta: context.onSetMeta || emptyFunction,
+      onPageNotFound: context.onPageNotFound || emptyFunction,
+    };
+  }
+
+  render() {
+    const { children } = this.props;
+    return React.Children.only(children);
+  }
+}
+
+export default ContextHolder;

src/core/Location.js

@@ -7,10 +7,8 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import createHistory from 'history/lib/createBrowserHistory';
-import createMemoryHistory from 'history/lib/createMemoryHistory';
-import useQueries from 'history/lib/useQueries';
+import { browserHistory, createMemoryHistory } from 'react-router';
 
-const location = useQueries(process.env.BROWSER ? createHistory : createMemoryHistory)();
+const location = process.env.BROWSER ? browserHistory : createMemoryHistory();
 
 export default location;

src/routes.js

@@ -8,39 +8,34 @@
  */
 
 import React from 'react';
-import Router from 'react-routing/src/Router';
+import { IndexRoute, Route } from 'react-router';
 import fetch from './core/fetch';
 import App from './components/App';
 import ContentPage from './components/ContentPage';
 import ContactPage from './components/ContactPage';
 import LoginPage from './components/LoginPage';
 import RegisterPage from './components/RegisterPage';
 import NotFoundPage from './components/NotFoundPage';
-import ErrorPage from './components/ErrorPage';
 
-const router = new Router(on => {
-  on('*', async (state, next) => {
-    const component = await next();
-    return component && <App context={state.context}>{component}</App>;
-  });
-
-  on('/contact', async () => <ContactPage />);
-
-  on('/login', async () => <LoginPage />);
-
-  on('/register', async () => <RegisterPage />);
-
-  on('*', async (state) => {
-    const query = `/graphql?query={content(path:"${state.path}"){path,title,content,component}}`;
-    const response = await fetch(query);
-    const { data } = await response.json();
-    return data && data.content && <ContentPage {...data.content} />;
-  });
-
-  on('error', (state, error) => state.statusCode === 404 ?
-    <App context={state.context} error={error}><NotFoundPage /></App> :
-    <App context={state.context} error={error}><ErrorPage /></App>
-  );
-});
-
-export default router;
+async function getContextComponent(location, callback) {
+  const query = '/graphql?' +
+    `query={content(path:"${location.pathname}"){path,title,content,component}}`;
+  const response = await fetch(query);
+  const { data } = await response.json();
+  // using an arrow to pass page instance instead of page class; cb accepts class by default
+  callback(null, () => <ContentPage {...data.content} />);
+}
+
+export default (
+  <Route>
+    <Route path="/" component={App}>
+      <IndexRoute getComponent={getContextComponent} />
+      <Route path="contact" component={ContactPage} />
+      <Route path="login" component={LoginPage} />
+      <Route path="register" component={RegisterPage} />
+      <Route path="about" getComponent={getContextComponent} />
+      <Route path="privacy" getComponent={getContextComponent} />
+    </Route>
+    <Route path="*" component={NotFoundPage} />
+  </Route>
+);