From 5c89bc386e3065d9481f484fbdcfaecf18752e9a Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Thu, 11 May 2017 11:46:43 -0700
Subject: [PATCH] [1.0] WIP Upgrade React Router to v4 (#940)

* WIP RR v4 working in development

* Add scrolling support + small refactors

* Add clientside 404 support

* Use more generic id for root div for Gatsby

* Avoid unneeded dependency on create-react-class

* Use fork of catch-links to avoid its dependency on the url module which adds ~25kb of JS

https://github.com/jackmoore/catch-links/blob/aedc104ae5b1031b325398997827c76bb08d9f4c/index.js

* Remove react-ga dependency as it adds unneeded weight

* Static rendering working and production client entry sorta working

* Get router working in production w/ lazy loading of bundles

* Make this.props.children a function in layouts so can control which page is rendered as child

* Add path-to-regexp to list of modules that should always be in commons

* Expose navigateTo on gatsby-link for programmatic navigation

* Stop using term 'routes'

* Remove old routes generation code

* Rename file

* Add support for client-only paths & example site for this

* Format + remove debugging
---
 examples/client-only-paths/.eslintrc          |   8 +
 examples/client-only-paths/README.md          |   6 +
 examples/client-only-paths/gatsby-config.js   |  14 +
 examples/client-only-paths/gatsby-node.js     |  19 ++
 examples/client-only-paths/package.json       |  29 ++
 examples/client-only-paths/src/html.js        |  56 ++++
 .../client-only-paths/src/layouts/index.js    |  30 +++
 examples/client-only-paths/src/pages/index.js | 114 ++++++++
 examples/client-only-paths/src/pages/main.css |  10 +
 .../client-only-paths/src/utils/typography.js |  38 +++
 examples/gatsbygram/gatsby-node.js            |   2 +-
 examples/gatsbygram/src/components/modal.js   |  17 +-
 examples/gatsbygram/src/html.js               |   2 +-
 .../src/layouts/{default.js => index.js}      |  33 ++-
 examples/gatsbygram/src/pages/index.js        |   3 +-
 examples/hn/src/html.js                       |   2 +-
 examples/hn/src/layouts/default.js            |   2 +-
 examples/using-drupal/src/html.js             |   2 +-
 .../src/layouts/{default.js => index.js}      |   2 +-
 examples/using-drupal/src/pages/index.js      |   2 +-
 packages/gatsby-link/package.json             |   4 +-
 packages/gatsby-link/src/index.js             |  76 +++---
 packages/gatsby-link/yarn.lock                |  13 +-
 packages/gatsby-plugin-catch-links/.gitignore |   1 +
 .../gatsby-plugin-catch-links/package.json    |   3 -
 .../src/catch-links.js                        |  43 +++
 .../src/gatsby-browser.js                     |   8 +-
 .../gatsby-plugin-google-analytics/.gitignore |   1 +
 .../package.json                              |   3 -
 .../src/gatsby-browser.js                     |  13 +-
 .../src/gatsby-ssr.js                         |  17 ++
 packages/gatsby-plugin-preact/package.json    |   4 +-
 .../src/on-node-create.js                     |   4 +-
 .../src/parse.js                              |  12 +-
 .../gatsby/lib/query-runner/pages-writer.js   | 137 ++++++++++
 packages/gatsby/package.json                  |   7 +-
 packages/gatsby/src/bootstrap/index.js        |   5 +-
 packages/gatsby/src/cache-dir/app.js          |   4 +-
 .../gatsby/src/cache-dir/production-app.js    | 185 ++++++++++---
 packages/gatsby/src/cache-dir/root.js         | 101 +++++--
 packages/gatsby/src/cache-dir/static-entry.js | 235 ++++++++--------
 packages/gatsby/src/joi-schemas/joi.js        |   1 +
 packages/gatsby/src/query-runner/index.js     |   2 +-
 .../gatsby/src/query-runner/route-writer.js   | 251 ------------------
 .../gatsby/src/schema/build-node-types.js     |   2 +-
 .../src/schema/infer-graphql-input-fields.js  |   2 +-
 .../gatsby/src/schema/infer-graphql-type.js   |   4 +-
 packages/gatsby/src/schema/node-interface.js  |   2 +-
 packages/gatsby/src/schema/site-schema.js     |   6 +-
 packages/gatsby/src/utils/build.js            |   6 -
 packages/gatsby/src/utils/webpack.config.js   |  11 +-
 .../connection/__tests__/arrayconnection.js   |  12 +-
 .../src/connection/__tests__/connection.js    |  11 +-
 .../src/connection/arrayconnection.js         |  17 +-
 .../src/connection/connection.js              |  14 +-
 .../src/connection/connectiontypes.js         |  24 +-
 www/src/html.js                               |   2 +-
 www/src/layouts/{default.js => index.js}      |   2 +-
 www/src/pages/index.js                        |   2 +-
 www/src/templates/template-blog-post.js       |   1 -
 60 files changed, 1041 insertions(+), 598 deletions(-)
 create mode 100644 examples/client-only-paths/.eslintrc
 create mode 100644 examples/client-only-paths/README.md
 create mode 100644 examples/client-only-paths/gatsby-config.js
 create mode 100644 examples/client-only-paths/gatsby-node.js
 create mode 100644 examples/client-only-paths/package.json
 create mode 100644 examples/client-only-paths/src/html.js
 create mode 100644 examples/client-only-paths/src/layouts/index.js
 create mode 100644 examples/client-only-paths/src/pages/index.js
 create mode 100644 examples/client-only-paths/src/pages/main.css
 create mode 100644 examples/client-only-paths/src/utils/typography.js
 rename examples/gatsbygram/src/layouts/{default.js => index.js} (87%)
 rename examples/using-drupal/src/layouts/{default.js => index.js} (97%)
 create mode 100644 packages/gatsby-plugin-catch-links/src/catch-links.js
 create mode 100644 packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
 create mode 100644 packages/gatsby/lib/query-runner/pages-writer.js
 delete mode 100644 packages/gatsby/src/query-runner/route-writer.js
 rename www/src/layouts/{default.js => index.js} (99%)

diff --git a/examples/client-only-paths/.eslintrc b/examples/client-only-paths/.eslintrc
new file mode 100644
index 0000000000000..aadde9c0aa03d
--- /dev/null
+++ b/examples/client-only-paths/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}
\ No newline at end of file
diff --git a/examples/client-only-paths/README.md b/examples/client-only-paths/README.md
new file mode 100644
index 0000000000000..29fdaa2dc6d56
--- /dev/null
+++ b/examples/client-only-paths/README.md
@@ -0,0 +1,6 @@
+# Client-only paths
+
+https://client-only-paths.gatsbyjs.org
+
+Example site that demostrates how to build Gatsby sites
+with paths that are client-only.
diff --git a/examples/client-only-paths/gatsby-config.js b/examples/client-only-paths/gatsby-config.js
new file mode 100644
index 0000000000000..67d69843c1785
--- /dev/null
+++ b/examples/client-only-paths/gatsby-config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  siteMetadata: {
+    title: `Client only paths`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: `UA-93349937-2`,
+      },
+    },
+    `gatsby-plugin-offline`,
+  ],
+}
diff --git a/examples/client-only-paths/gatsby-node.js b/examples/client-only-paths/gatsby-node.js
new file mode 100644
index 0000000000000..e217a7856f4e9
--- /dev/null
+++ b/examples/client-only-paths/gatsby-node.js
@@ -0,0 +1,19 @@
+const _ = require(`lodash`)
+const Promise = require(`bluebird`)
+const path = require(`path`)
+const slash = require(`slash`)
+
+// Implement the Gatsby API “onUpsertPage”. This is
+// called after every page is created.
+exports.onUpsertPage = ({ page, boundActionCreators }) => {
+  const { upsertPage } = boundActionCreators
+  return new Promise((resolve, reject) => {
+    // Make the front page match everything client side.
+    // Normally your paths should be a bit more judicious.
+    if (page.path === `/` && !page.matchPath) {
+      page.matchPath = `/:path`
+      upsertPage(page)
+    }
+    resolve()
+  })
+}
diff --git a/examples/client-only-paths/package.json b/examples/client-only-paths/package.json
new file mode 100644
index 0000000000000..878fb5a187930
--- /dev/null
+++ b/examples/client-only-paths/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "gatsby-example-using-drupal",
+  "private": true,
+  "description": "Gatsby example site using the Drupal source plugin",
+  "version": "1.0.0",
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "dependencies": {
+    "gatsby": "canary",
+    "gatsby-link": "canary",
+    "gatsby-plugin-google-analytics": "canary",
+    "gatsby-plugin-offline": "canary",
+    "gatsby-source-drupal": "canary",
+    "lodash": "^4.16.4",
+    "react-addons-css-transition-group": "^15.5.2",
+    "react-typography": "^0.15.0",
+    "slash": "^1.0.0",
+    "typography": "^0.15.8",
+    "typography-breakpoint-constants": "^0.14.0"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}
diff --git a/examples/client-only-paths/src/html.js b/examples/client-only-paths/src/html.js
new file mode 100644
index 0000000000000..5415c9c674e32
--- /dev/null
+++ b/examples/client-only-paths/src/html.js
@@ -0,0 +1,56 @@
+import React from "react"
+import { TypographyStyle } from "react-typography"
+import typography from "./utils/typography"
+
+let stylesStr
+if (process.env.NODE_ENV === `production`) {
+  try {
+    stylesStr = require(`!raw-loader!../public/styles.css`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+module.exports = React.createClass({
+  render() {
+    let css
+    if (process.env.NODE_ENV === `production`) {
+      css = (
+        <style
+          id="gatsby-inlined-css"
+          dangerouslySetInnerHTML={{ __html: stylesStr }}
+        />
+      )
+    }
+
+    return (
+      <html op="news" lang="en">
+        <head>
+          {this.props.headComponents}
+
+          <meta name="referrer" content="origin" />
+          <meta charSet="utf-8" />
+          <meta
+            name="description"
+            content="Gatsby example site demoing client only paths"
+          />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <title>Gatsby Client Only Paths</title>
+          <TypographyStyle typography={typography} />
+          {css}
+        </head>
+        <body>
+          <div
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    )
+  },
+})
diff --git a/examples/client-only-paths/src/layouts/index.js b/examples/client-only-paths/src/layouts/index.js
new file mode 100644
index 0000000000000..1394603787ed9
--- /dev/null
+++ b/examples/client-only-paths/src/layouts/index.js
@@ -0,0 +1,30 @@
+import React from "react"
+import Link from "gatsby-link"
+
+import { rhythm } from "../utils/typography"
+
+class DefaultLayout extends React.Component {
+  render() {
+    return (
+      <div
+        style={{
+          margin: `0 auto`,
+          marginTop: rhythm(1.5),
+          marginBottom: rhythm(1.5),
+          maxWidth: 650,
+          paddingLeft: rhythm(3 / 4),
+          paddingRight: rhythm(3 / 4),
+        }}
+      >
+        <Link style={{ textDecoration: `none` }} to="/">
+          <h3 style={{ color: `tomato`, marginBottom: rhythm(1.5) }}>
+            Example of adding client only paths
+          </h3>
+        </Link>
+        {this.props.children()}
+      </div>
+    )
+  }
+}
+
+export default DefaultLayout
diff --git a/examples/client-only-paths/src/pages/index.js b/examples/client-only-paths/src/pages/index.js
new file mode 100644
index 0000000000000..9c052a21ce7e1
--- /dev/null
+++ b/examples/client-only-paths/src/pages/index.js
@@ -0,0 +1,114 @@
+import React from "react"
+import Link from "gatsby-link"
+import ReactCSSTransitionGroup from "react-addons-css-transition-group"
+import { Route, Redirect } from "react-router-dom"
+
+import "./main.css"
+
+class AnimationExample extends React.Component {
+  render() {
+    return (
+      <div style={{ position: `relative`, minHeight: `80vh` }}>
+        <Route
+          render={({ location }) => (
+            <div style={styles.fill}>
+              <Route
+                exact
+                path="/"
+                render={() => <Redirect to="/10/90/50" />}
+              />
+
+              <ul style={styles.nav}>
+                <NavLink to="/10/90/50">Red</NavLink>
+                <NavLink to="/120/100/40">Green</NavLink>
+                <NavLink to="/200/100/40">Blue</NavLink>
+                <NavLink to="/310/100/50">Pink</NavLink>
+              </ul>
+
+              <div style={styles.content}>
+                <ReactCSSTransitionGroup
+                  transitionName="fade"
+                  transitionEnterTimeout={300}
+                  transitionLeaveTimeout={300}
+                >
+                  {/* no different than other usage of
+                ReactCSSTransitionGroup, just make
+                sure to pass `location` to `Route`
+                so it can match the old location
+                as it animates out
+            */}
+                  <Route
+                    location={location}
+                    key={location.key}
+                    path="/:h/:s/:l"
+                    component={HSL}
+                  />
+                </ReactCSSTransitionGroup>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    )
+  }
+}
+
+const NavLink = props => (
+  <li style={styles.navItem}>
+    <Link {...props} style={{ color: `inherit` }} />
+  </li>
+)
+
+const HSL = ({ match: { params } }) => (
+  <div
+    style={{
+      ...styles.fill,
+      ...styles.hsl,
+      background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`,
+    }}
+  >
+    hsl({params.h}, {params.s}%, {params.l}%)
+  </div>
+)
+
+const styles = {}
+
+styles.fill = {
+  position: `absolute`,
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+}
+
+styles.content = {
+  ...styles.fill,
+  top: `40px`,
+  textAlign: `center`,
+}
+
+styles.nav = {
+  padding: 0,
+  margin: 0,
+  position: `absolute`,
+  top: 0,
+  height: `40px`,
+  width: `100%`,
+  display: `flex`,
+}
+
+styles.navItem = {
+  textAlign: `center`,
+  flex: 1,
+  listStyleType: `none`,
+  padding: `10px`,
+}
+
+styles.hsl = {
+  ...styles.fill,
+  color: `white`,
+  paddingTop: `20px`,
+  fontSize: `30px`,
+}
+
+export default AnimationExample
diff --git a/examples/client-only-paths/src/pages/main.css b/examples/client-only-paths/src/pages/main.css
new file mode 100644
index 0000000000000..52cd3f848256f
--- /dev/null
+++ b/examples/client-only-paths/src/pages/main.css
@@ -0,0 +1,10 @@
+.fade-enter {
+  opacity: 0;
+  z-index: 1;
+}
+
+.fade-enter.fade-enter-active {
+  opacity: 1;
+  transition: opacity 250ms ease-in;
+}
+
diff --git a/examples/client-only-paths/src/utils/typography.js b/examples/client-only-paths/src/utils/typography.js
new file mode 100644
index 0000000000000..b64213e5e41be
--- /dev/null
+++ b/examples/client-only-paths/src/utils/typography.js
@@ -0,0 +1,38 @@
+import Typography from "typography"
+import {
+  MOBILE_MEDIA_QUERY,
+  TABLET_MEDIA_QUERY,
+} from "typography-breakpoint-constants"
+
+const options = {
+  baseFontSize: `18px`,
+  baseLineHeight: 1.45,
+  blockMarginBottom: 0.75,
+  scaleRatio: 2.15,
+  overrideStyles: ({ rhythm, scale }, options) => ({
+    "h1,h2,h3,h4": {
+      lineHeight: 1.2,
+    },
+    [TABLET_MEDIA_QUERY]: {
+      // Make baseFontSize on mobile 17px.
+      html: {
+        fontSize: `${17 / 16 * 100}%`,
+      },
+    },
+    [MOBILE_MEDIA_QUERY]: {
+      // Make baseFontSize on mobile 16px.
+      html: {
+        fontSize: `${16 / 16 * 100}%`,
+      },
+    },
+  }),
+}
+
+const typography = new Typography(options)
+
+// Hot reload typography in development.
+if (process.env.NODE_ENV !== `production`) {
+  typography.injectStyles()
+}
+
+export default typography
diff --git a/examples/gatsbygram/gatsby-node.js b/examples/gatsbygram/gatsby-node.js
index 7a71bb6a50770..f0f132c407427 100644
--- a/examples/gatsbygram/gatsby-node.js
+++ b/examples/gatsbygram/gatsby-node.js
@@ -54,7 +54,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           // as a template component. The `context` is
           // optional but is often necessary so the template
           // can query data specific to each page.
-          path: slug(edge.node.id),
+          path: `/${slug(edge.node.id)}/`,
           component: slash(postTemplate),
           context: {
             id: edge.node.id,
diff --git a/examples/gatsbygram/src/components/modal.js b/examples/gatsbygram/src/components/modal.js
index 619ee40fbaaf3..d7859fdabec9c 100644
--- a/examples/gatsbygram/src/components/modal.js
+++ b/examples/gatsbygram/src/components/modal.js
@@ -1,11 +1,12 @@
 import React from "react"
 import Modal from "react-modal"
-import browserHistory from "react-router/lib/browserHistory"
 import CaretRight from "react-icons/lib/fa/caret-right"
 import CaretLeft from "react-icons/lib/fa/caret-left"
 import Close from "react-icons/lib/md/close"
 import findIndex from "lodash/findIndex"
 import mousetrap from "mousetrap"
+import * as PropTypes from "prop-types"
+import { navigateTo } from "gatsby-link"
 
 import { rhythm } from "../utils/typography"
 
@@ -51,7 +52,7 @@ class GatsbyGramModal extends React.Component {
       } else {
         nextPost = posts[currentIndex + 1]
       }
-      browserHistory.push(`/${nextPost.id}/`)
+      navigateTo(`/${nextPost.id}/`)
     }
   }
 
@@ -69,7 +70,7 @@ class GatsbyGramModal extends React.Component {
       } else {
         previousPost = posts[currentIndex - 1]
       }
-      browserHistory.push(`/${previousPost.id}/`)
+      navigateTo(`/${previousPost.id}/`)
     }
   }
 
@@ -77,7 +78,7 @@ class GatsbyGramModal extends React.Component {
     return (
       <Modal
         isOpen={this.props.isOpen}
-        onRequestClose={() => browserHistory.push(`/`)}
+        onRequestClose={() => navigateTo(`/`)}
         style={{
           overlay: {
             position: `fixed`,
@@ -103,7 +104,7 @@ class GatsbyGramModal extends React.Component {
         contentLabel="Modal"
       >
         <div
-          onClick={() => browserHistory.push(`/`)}
+          onClick={() => navigateTo(`/`)}
           css={{
             display: `flex`,
             position: `relative`,
@@ -129,7 +130,9 @@ class GatsbyGramModal extends React.Component {
               }}
               onClick={e => this.previous(e)}
             />
-            {this.props.children}
+            {this.props.children({
+              location: { pathname: this.props.location.pathname },
+            })}
             <CaretRight
               css={{
                 cursor: `pointer`,
@@ -141,7 +144,7 @@ class GatsbyGramModal extends React.Component {
             />
           </div>
           <Close
-            onClick={() => browserHistory.push(`/`)}
+            onClick={() => navigateTo(`/`)}
             css={{
               cursor: `pointer`,
               color: `rgba(255,255,255,0.8)`,
diff --git a/examples/gatsbygram/src/html.js b/examples/gatsbygram/src/html.js
index e1f3b9dc40d07..a6ac2da8851d3 100644
--- a/examples/gatsbygram/src/html.js
+++ b/examples/gatsbygram/src/html.js
@@ -60,7 +60,7 @@ module.exports = React.createClass({
         </head>
         <body>
           <div
-            id="react-mount"
+            id="___gatsby"
             dangerouslySetInnerHTML={{ __html: this.props.body }}
           />
           {this.props.postBodyComponents}
diff --git a/examples/gatsbygram/src/layouts/default.js b/examples/gatsbygram/src/layouts/index.js
similarity index 87%
rename from examples/gatsbygram/src/layouts/default.js
rename to examples/gatsbygram/src/layouts/index.js
index 3678a2fed271a..dc22fa4558b98 100644
--- a/examples/gatsbygram/src/layouts/default.js
+++ b/examples/gatsbygram/src/layouts/index.js
@@ -49,11 +49,6 @@ class DefaultLayout extends React.Component {
       // Always set overflow-y to scroll so the scrollbar stays visible avoiding
       // weird jumping.
       this.htmlElement.style.overflowY = `scroll`
-
-      // Save the homepage if we haven't already.
-      if (!this.modalBackgroundChildren) {
-        this.modalBackgroundChildren = this.props.children
-      }
     } else {
       // Otherwise we're navigating back home so delete old home so the
       // modal can be destroyed.
@@ -69,7 +64,14 @@ class DefaultLayout extends React.Component {
 
   render() {
     const { location } = this.props
-    const isModal = this.modalBackgroundChildren
+    let isModal = false
+    if (
+      this.props.location.pathname !== `/` &&
+      this.props.location.pathname !== `/about/` &&
+      this.windowWidth > 750
+    ) {
+      isModal = true
+    }
 
     return (
       <div
@@ -151,12 +153,21 @@ class DefaultLayout extends React.Component {
             },
           }}
         >
-          {isModal ? this.modalBackgroundChildren : this.props.children}
+          <div>
+            {isModal
+              ? this.props.children({
+                  ...this.props,
+                  location: { pathname: `/` },
+                })
+              : this.props.children()}
+          </div>
 
-          {isModal &&
-            <Modal isOpen={true} posts={this.posts} location={location}>
-              {this.props.children}
-            </Modal>}
+          <div>
+            {isModal &&
+              <Modal isOpen={true} posts={this.posts} location={location}>
+                {this.props.children}
+              </Modal>}
+          </div>
         </div>
       </div>
     )
diff --git a/examples/gatsbygram/src/pages/index.js b/examples/gatsbygram/src/pages/index.js
index 9ff924c85d1fc..e9e0aa6ebde74 100644
--- a/examples/gatsbygram/src/pages/index.js
+++ b/examples/gatsbygram/src/pages/index.js
@@ -128,9 +128,10 @@ class Index extends React.Component {
           </div>
         </div>
         {/* posts */}
-        {chunk(posts.slice(0, this.state.postsToShow), 3).map(chunk => {
+        {chunk(posts.slice(0, this.state.postsToShow), 3).map((chunk, i) => {
           return (
             <div
+              key={`chunk-${i}`}
               css={{
                 display: `flex`,
                 alignItems: `stretch`,
diff --git a/examples/hn/src/html.js b/examples/hn/src/html.js
index dbd8cb489bcff..8fe798f8ce6b3 100644
--- a/examples/hn/src/html.js
+++ b/examples/hn/src/html.js
@@ -45,7 +45,7 @@ module.exports = React.createClass({
         </head>
         <body>
           <div
-            id="react-mount"
+            id="___gatsby"
             dangerouslySetInnerHTML={{ __html: this.props.body }}
           />
           {this.props.postBodyComponents}
diff --git a/examples/hn/src/layouts/default.js b/examples/hn/src/layouts/default.js
index b505efc7f2cd4..3ca4bb0edda53 100644
--- a/examples/hn/src/layouts/default.js
+++ b/examples/hn/src/layouts/default.js
@@ -84,7 +84,7 @@ class DefaultLayout extends React.Component {
           <tr style={{ height: `10px` }} />
           <tr>
             <td>
-              {this.props.children}
+              {this.props.children()}
             </td>
           </tr>
           <tr>
diff --git a/examples/using-drupal/src/html.js b/examples/using-drupal/src/html.js
index 292cfb71c3c79..aaee5b814a2af 100644
--- a/examples/using-drupal/src/html.js
+++ b/examples/using-drupal/src/html.js
@@ -42,7 +42,7 @@ module.exports = React.createClass({
         </head>
         <body>
           <div
-            id="react-mount"
+            id="___gatsby"
             dangerouslySetInnerHTML={{ __html: this.props.body }}
           />
           {this.props.postBodyComponents}
diff --git a/examples/using-drupal/src/layouts/default.js b/examples/using-drupal/src/layouts/index.js
similarity index 97%
rename from examples/using-drupal/src/layouts/default.js
rename to examples/using-drupal/src/layouts/index.js
index 8724bbf0eaf70..556ea774f2890 100644
--- a/examples/using-drupal/src/layouts/default.js
+++ b/examples/using-drupal/src/layouts/index.js
@@ -21,7 +21,7 @@ class DefaultLayout extends React.Component {
             Example of using Drupal as a data source for a Gatsby site
           </h3>
         </Link>
-        {this.props.children}
+        {this.props.children()}
         <hr />
         <p>
           The src for this website is at
diff --git a/examples/using-drupal/src/pages/index.js b/examples/using-drupal/src/pages/index.js
index 757e3be095be7..a9705a81834a5 100644
--- a/examples/using-drupal/src/pages/index.js
+++ b/examples/using-drupal/src/pages/index.js
@@ -14,7 +14,7 @@ class IndexPage extends React.Component {
             name = article.author.name
           }
           return (
-            <div>
+            <div key={article.nid}>
               <Link to={`/node/${article.nid}/`}>
                 <h4>
                   <span style={{ color: `gray` }}>{article.created}</span>
diff --git a/packages/gatsby-link/package.json b/packages/gatsby-link/package.json
index bc605bb527aec..3c02cab0b8e0f 100644
--- a/packages/gatsby-link/package.json
+++ b/packages/gatsby-link/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@types/react-router": "^2.0.49",
-    "create-react-class": "^15.5.2",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "ric": "^1.3.0"
   }
 }
diff --git a/packages/gatsby-link/src/index.js b/packages/gatsby-link/src/index.js
index 82d9ba8be114c..254a3a3acb043 100644
--- a/packages/gatsby-link/src/index.js
+++ b/packages/gatsby-link/src/index.js
@@ -1,56 +1,60 @@
 import React from "react"
-import Link from "react-router/lib/Link"
-import createClass from "create-react-class"
+import { Link } from "react-router-dom"
 import PropTypes from "prop-types"
 
+if (typeof window !== `undefined`) {
+  require(`ric`)
+}
+
 let linkPrefix = ``
 if (__PREFIX_LINKS__) {
   linkPrefix = __LINK_PREFIX__
 }
 
-// Use createClass instead of ES6 class as Babel spews out a ton of code
-// for polyfilling classes which there's no reason to pay for this.
-// A function component would be ideal but we need componentDidMount.
-const GatsbyLink = createClass({
+class GatsbyLink extends React.Component {
   propTypes: {
     to: PropTypes.string.isRequired,
-  },
+  }
   componentDidMount() {
     // Only enable prefetching of Link resources in production and for browsers
     // that don't support service workers *cough* Safari/IE *cough*.
+    // TODO also add check if user is using SW, e.g. window.caches
     if (
-      (process.env.NODE_ENV === `production` &&
-        !(`serviceWorker` in navigator)) ||
-      window.location.protocol !== `https:`
+      process.env.NODE_ENV === `production` &&
+      (!(`serviceWorker` in window.navigator) ||
+        window.location.protocol !== `https:`)
     ) {
-      const routes = window.gatsbyRootRoute
-      const { createMemoryHistory } = require(`history`)
-      const matchRoutes = require(`react-router/lib/matchRoutes`)
-      const getComponents = require(`react-router/lib/getComponents`)
-
-      const createLocation = createMemoryHistory().createLocation
-
-      if (typeof routes !== `undefined`) {
-        matchRoutes(
-          [routes],
-          createLocation(this.props.to),
-          (error, nextState) => {
-            if (error) {
-              return console.error(error)
-            }
-
-            if (nextState) {
-              getComponents(nextState)
-            }
-          }
-        )
-      }
+      requestUserIdle(() => {
+        ___loadScriptsForPath(this.props.to)
+      })
     }
-  },
+  }
+
   render() {
     const to = linkPrefix + this.props.to
-    return <Link {...this.props} to={to} />
-  },
-})
+    return (
+      <Link
+        onClick={e => {
+          // In production, make sure the necessary scripts are
+          // loaded before continuing.
+          if (process.env.NODE_ENV === `production`) {
+            e.preventDefault()
+            window.___navigateTo(this.props.to)
+          }
+        }}
+        {...this.props}
+        to={to}
+      />
+    )
+  }
+}
+
+GatsbyLink.contextTypes = {
+  router: PropTypes.object,
+}
 
 module.exports = GatsbyLink
+
+exports.navigateTo = pathname => {
+  window.___navigateTo(pathname)
+}
diff --git a/packages/gatsby-link/yarn.lock b/packages/gatsby-link/yarn.lock
index 308d8c565e28a..c7ab7eb6e1ab2 100644
--- a/packages/gatsby-link/yarn.lock
+++ b/packages/gatsby-link/yarn.lock
@@ -365,13 +365,6 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-create-react-class@^15.5.2:
-  version "15.5.2"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.2.tgz#6a8758348df660b88326a0e764d569f274aad681"
-  dependencies:
-    fbjs "^0.8.9"
-    object-assign "^4.1.1"
-
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -924,7 +917,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -1106,6 +1099,10 @@ request@^2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
+ric@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ric/-/ric-1.3.0.tgz#8e95042609ce8213548a83164d08e94fae94909f"
+
 rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
diff --git a/packages/gatsby-plugin-catch-links/.gitignore b/packages/gatsby-plugin-catch-links/.gitignore
index 779c3b5b654c0..5abfffd275911 100644
--- a/packages/gatsby-plugin-catch-links/.gitignore
+++ b/packages/gatsby-plugin-catch-links/.gitignore
@@ -1 +1,2 @@
 /gatsby-browser.js
+/catch-links.js
diff --git a/packages/gatsby-plugin-catch-links/package.json b/packages/gatsby-plugin-catch-links/package.json
index 9ea08397f1c20..bed0221dacecd 100644
--- a/packages/gatsby-plugin-catch-links/package.json
+++ b/packages/gatsby-plugin-catch-links/package.json
@@ -13,9 +13,6 @@
   ],
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "license": "MIT",
-  "dependencies": {
-    "catch-links": "^2.0.1"
-  },
   "devDependencies": {
     "babel-cli": "^6.24.1"
   }
diff --git a/packages/gatsby-plugin-catch-links/src/catch-links.js b/packages/gatsby-plugin-catch-links/src/catch-links.js
new file mode 100644
index 0000000000000..b83629740a6ae
--- /dev/null
+++ b/packages/gatsby-plugin-catch-links/src/catch-links.js
@@ -0,0 +1,43 @@
+module.exports = function(root, cb) {
+  root.addEventListener(`click`, function(ev) {
+    if (
+      ev.altKey ||
+      ev.ctrlKey ||
+      ev.metaKey ||
+      ev.shiftKey ||
+      ev.defaultPrevented
+    ) {
+      return true
+    }
+
+    var anchor = null
+    for (var n = ev.target; n.parentNode; n = n.parentNode) {
+      if (n.nodeName === `A`) {
+        anchor = n
+        break
+      }
+    }
+    if (!anchor) return true
+
+    // IE clears the host value if the anchor href changed after creation, e.g.
+    // in React. Creating a new anchor element to ensure host value is present
+    var a1 = document.createElement(`a`)
+    a1.href = anchor.href
+
+    // In IE, the default port is included in the anchor host but excluded from
+    // the location host.  This affects the ability to directly compare
+    // location host to anchor host.  For example: http://example.com would
+    // have a location.host of 'example.com' and an anchor.host of
+    // 'example.com:80' Creating anchor from the location.href to normalize the
+    // host value.
+    var a2 = document.createElement(`a`)
+    a2.href = window.location.href
+
+    if (a1.host !== a2.host) return true
+
+    ev.preventDefault()
+
+    cb(anchor.getAttribute(`href`))
+    return false
+  })
+}
diff --git a/packages/gatsby-plugin-catch-links/src/gatsby-browser.js b/packages/gatsby-plugin-catch-links/src/gatsby-browser.js
index 6d340081b34f3..6f83f6d227a42 100644
--- a/packages/gatsby-plugin-catch-links/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-catch-links/src/gatsby-browser.js
@@ -1,7 +1,7 @@
-import catchLinks from "catch-links"
-import browserHistory from "react-router/lib/browserHistory"
+import { navigateTo } from "gatsby-link"
+
+import catchLinks from "./catch-links"
 
 catchLinks(window, href => {
-  console.log(href)
-  browserHistory.push(href)
+  navigateTo(href)
 })
diff --git a/packages/gatsby-plugin-google-analytics/.gitignore b/packages/gatsby-plugin-google-analytics/.gitignore
index 779c3b5b654c0..d7d1695e06bc4 100644
--- a/packages/gatsby-plugin-google-analytics/.gitignore
+++ b/packages/gatsby-plugin-google-analytics/.gitignore
@@ -1 +1,2 @@
 /gatsby-browser.js
+/gatsby-ssr.js
diff --git a/packages/gatsby-plugin-google-analytics/package.json b/packages/gatsby-plugin-google-analytics/package.json
index 41231ef5dcf68..5de5dcad1c60a 100644
--- a/packages/gatsby-plugin-google-analytics/package.json
+++ b/packages/gatsby-plugin-google-analytics/package.json
@@ -3,9 +3,6 @@
   "description": "Gatsby plugin to add google analytics onto a site",
   "version": "1.0.0-alpha14",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
-  "dependencies": {
-    "react-ga": "^2.1.2"
-  },
   "devDependencies": {
     "babel-cli": "^6.24.1"
   },
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
index c77965a353d1c..a3638c901fdd8 100644
--- a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js
@@ -1,16 +1,7 @@
-import ReactGA from "react-ga"
-
-exports.clientEntry = (args, pluginOptions) => {
-  // Don't track while developing.
-  if (process.env.NODE_ENV === `production`) {
-    ReactGA.initialize(pluginOptions.trackingId)
-  }
-}
-
 exports.onRouteUpdate = function(location) {
   // Don't track while developing.
   if (process.env.NODE_ENV === `production`) {
-    ReactGA.set({ page: location.pathname })
-    ReactGA.pageview(location.pathname)
+    ga(`set`, `page`, location.pathname)
+    ga(`send`, `pageview`)
   }
 }
diff --git a/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
new file mode 100644
index 0000000000000..5d82cd1ac5800
--- /dev/null
+++ b/packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js
@@ -0,0 +1,17 @@
+import React from "react"
+
+exports.modifyPostBodyComponents = (args, pluginOptions) => [
+  <script
+    dangerouslySetInnerHTML={{
+      __html: `
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', '${pluginOptions.trackingId}', 'auto');
+  ga('send', 'pageview');
+      `,
+    }}
+  />,
+]
diff --git a/packages/gatsby-plugin-preact/package.json b/packages/gatsby-plugin-preact/package.json
index 0bcc1566f6742..2cd4df91d0977 100644
--- a/packages/gatsby-plugin-preact/package.json
+++ b/packages/gatsby-plugin-preact/package.json
@@ -15,8 +15,8 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "preact": "^7.1.0",
-    "preact-compat": "^3.11.0"
+    "preact": "^8.1.0",
+    "preact-compat": "^3.16.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1"
diff --git a/packages/gatsby-transformer-react-docgen/src/on-node-create.js b/packages/gatsby-transformer-react-docgen/src/on-node-create.js
index 7ed140fa11073..fc3f50ec0f0cf 100644
--- a/packages/gatsby-transformer-react-docgen/src/on-node-create.js
+++ b/packages/gatsby-transformer-react-docgen/src/on-node-create.js
@@ -1,5 +1,5 @@
-import crypto from 'crypto'
-import parseMetadata from './parse'
+import crypto from "crypto"
+import parseMetadata from "./parse"
 
 const digest = str => crypto.createHash(`md5`).update(str).digest(`hex`)
 
diff --git a/packages/gatsby-transformer-react-docgen/src/parse.js b/packages/gatsby-transformer-react-docgen/src/parse.js
index b90a35abf8fd8..d578f72e98b8b 100644
--- a/packages/gatsby-transformer-react-docgen/src/parse.js
+++ b/packages/gatsby-transformer-react-docgen/src/parse.js
@@ -1,12 +1,12 @@
-import path from 'path'
+import path from "path"
 
-import * as types from 'babel-types'
-import { parse, defaultHandlers } from 'react-docgen'
-import { ERROR_MISSING_DEFINITION } from 'react-docgen/dist/parse'
+import * as types from "babel-types"
+import { parse, defaultHandlers } from "react-docgen"
+import { ERROR_MISSING_DEFINITION } from "react-docgen/dist/parse"
 import findAllComponentDefinitions
-  from 'react-docgen/dist/resolver/findAllComponentDefinitions'
+  from "react-docgen/dist/resolver/findAllComponentDefinitions"
 
-import { parseDoclets, applyPropDoclets } from './Doclets'
+import { parseDoclets, applyPropDoclets } from "./Doclets"
 
 function getAssignedIdenifier(path) {
   let property = path.parentPath
diff --git a/packages/gatsby/lib/query-runner/pages-writer.js b/packages/gatsby/lib/query-runner/pages-writer.js
new file mode 100644
index 0000000000000..8376566208008
--- /dev/null
+++ b/packages/gatsby/lib/query-runner/pages-writer.js
@@ -0,0 +1,137 @@
+const _ = require(`lodash`)
+const glob = require(`glob`)
+const parseFilepath = require(`parse-filepath`)
+const fs = require(`fs`)
+
+const { store } = require(`../redux/`)
+import {
+  layoutComponentChunkName,
+  pathChunkName,
+} from "../utils/js-chunk-names"
+
+// Write out pages information.
+const writePages = () => {
+  const { program, config, pages } = store.getState()
+
+  // Write out pages.json
+  const pagesData = pages.reduce(
+    (mem, { path, matchPath, componentChunkName, layout, jsonName }) => [
+      ...mem,
+      { componentChunkName, layout, jsonName, path, matchPath },
+    ],
+    []
+  )
+
+  // Get list of components, layouts, and json files.
+  let components = []
+  let layouts = []
+  let json = []
+
+  pages.forEach(p => {
+    components.push({
+      componentChunkName: p.componentChunkName,
+      component: p.component,
+    })
+    if (p.layout) {
+      layouts.push(p.layout)
+    }
+    json.push({ path: p.path, jsonName: p.jsonName })
+  })
+
+  // Add the default layout if it exists.
+  let defaultLayoutExists = false
+  if (glob.sync(`${program.directory}/src/layouts/index.*`).length !== 0) {
+    layouts.push(`index`)
+    defaultLayoutExists = true
+  }
+
+  layouts = _.uniq(layouts)
+  components = _.uniqBy(components, c => c.componentChunkName)
+
+  fs.writeFile(
+    `${program.directory}/.cache/pages.json`,
+    JSON.stringify(pagesData, null, 4)
+  )
+
+  // Create file with sync requires of layouts/components/json files.
+  let syncRequires = `// prefer default export if available
+const preferDefault = m => m && m.default || m
+\n\n`
+  syncRequires += `exports.components = {\n${components
+    .map(
+      c =>
+        `  "${c.componentChunkName}": preferDefault(require("${c.component}"))`
+    )
+    .join(`,\n`)}
+}\n\n`
+  syncRequires += `exports.json = {\n${json
+    .map(
+      j =>
+        `  "${j.jsonName}": require("${program.directory + `/.cache/json/` + j.jsonName}")`
+    )
+    .join(`,\n`)}
+}\n\n`
+  syncRequires += `exports.layouts = {\n${layouts
+    .map(l => {
+      let componentName = l
+      if (l !== false || typeof l !== `undefined`) {
+        componentName = `index`
+        return `  "${l}": preferDefault(require("${program.directory + `/src/layouts/` + componentName}"))`
+      } else {
+        return `  "${l}": false`
+      }
+    })
+    .join(`,\n`)}
+}`
+
+  fs.writeFile(`${program.directory}/.cache/sync-requires.js`, syncRequires)
+
+  // Create file with async requires of layouts/components/json files.
+  let asyncRequires = `// prefer default export if available
+const preferDefault = m => m && m.default || m
+\n`
+  asyncRequires += `exports.components = {\n${components
+    .map(
+      c =>
+        `  "${c.componentChunkName}": require("bundle-loader?lazy&name=${c.componentChunkName}!${c.component}")`
+    )
+    .join(`,\n`)}
+}\n\n`
+  asyncRequires += `exports.json = {\n${json
+    .map(
+      j =>
+        `  "${j.jsonName}": require("bundle-loader?lazy&name=${pathChunkName(j.path)}!${program.directory + `/.cache/json/` + j.jsonName}")`
+    )
+    .join(`,\n`)}
+}\n\n`
+  asyncRequires += `exports.layouts = {\n${layouts
+    .map(layout => {
+      let componentName = layout
+      if (layout !== false || typeof layout !== `undefined`) {
+        componentName = `index`
+        return `  "${layout}": require("bundle-loader?lazy&name=${`layout-component---${layout}`}!${program.directory + `/src/layouts/` + componentName}")`
+      } else {
+        return `  "${layout}": false`
+      }
+    })
+    .join(`,\n`)}
+}`
+
+  fs.writeFile(`${program.directory}/.cache/async-requires.js`, asyncRequires)
+}
+
+let writtenOnce = false
+let oldPages
+const debouncedWritePages = _.debounce(() => {
+  if (!writtenOnce || !_.isEqual(oldPages, store.getState().pages)) {
+    writePages()
+    writtenOnce = true
+    oldPages = store.getState().pages
+  }
+}, 250)
+
+store.subscribe(() => {
+  if (store.getState().lastAction.type === `UPSERT_PAGE`) {
+    debouncedWritePages()
+  }
+})
diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json
index 352a4279671be..15dd84d97b09d 100644
--- a/packages/gatsby/package.json
+++ b/packages/gatsby/package.json
@@ -49,7 +49,7 @@
     "gray-matter": "^2.1.0",
     "hapi": "^8.5.1",
     "highlight.js": "^9.8.0",
-    "history": "^2.1.2",
+    "history": "^4.6.1",
     "hosted-git-info": "^2.4.2",
     "invariant": "^2.2.2",
     "is-relative": "^0.2.1",
@@ -85,8 +85,9 @@
     "react-document-title": "^2.0.1",
     "react-dom": "^15.4.0",
     "react-hot-loader": "^3.0.0-beta.6",
-    "react-router": "^2.8.1",
-    "react-router-scroll": "^0.3.3",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.1",
+    "react-router-scroll": "ytase/react-router-scroll#build",
     "redux": "^3.6.0",
     "relay-compiler": "^1.0.0-rc.3",
     "remote-redux-devtools": "^0.5.7",
diff --git a/packages/gatsby/src/bootstrap/index.js b/packages/gatsby/src/bootstrap/index.js
index 8d54c9e9c86f0..3afba201e0cc7 100644
--- a/packages/gatsby/src/bootstrap/index.js
+++ b/packages/gatsby/src/bootstrap/index.js
@@ -155,7 +155,10 @@ data
   let browserAPIRunner = ``
 
   try {
-    browserAPIRunner = fs.readFileSync(`${siteDir}/api-runner-browser.js`, `utf-8`)
+    browserAPIRunner = fs.readFileSync(
+      `${siteDir}/api-runner-browser.js`,
+      `utf-8`
+    )
   } catch (err) {
     console.error(`Failed to read ${siteDir}/api-runner-browser.js`)
   }
diff --git a/packages/gatsby/src/cache-dir/app.js b/packages/gatsby/src/cache-dir/app.js
index a07f03b0f6366..7a8830b7f421e 100644
--- a/packages/gatsby/src/cache-dir/app.js
+++ b/packages/gatsby/src/cache-dir/app.js
@@ -6,15 +6,13 @@ import React from "react"
 import ReactDOM from "react-dom"
 import { AppContainer as HotContainer } from "react-hot-loader"
 
-const rootElement = document.getElementById(`react-mount`)
+const rootElement = document.getElementById(`___gatsby`)
 
 let Root = require(`./root`)
 if (Root.default) {
   Root = Root.default
 }
 
-console.log(Root)
-
 ReactDOM.render(
   <HotContainer>
     <Root />
diff --git a/packages/gatsby/src/cache-dir/production-app.js b/packages/gatsby/src/cache-dir/production-app.js
index f631988605fe3..c40aca056cdd9 100644
--- a/packages/gatsby/src/cache-dir/production-app.js
+++ b/packages/gatsby/src/cache-dir/production-app.js
@@ -4,27 +4,81 @@ apiRunner(`clientEntry`)
 
 import React from "react"
 import ReactDOM from "react-dom"
-import applyRouterMiddleware from "react-router/lib/applyRouterMiddleware"
-import Router from "react-router/lib/Router"
-import match from "react-router/lib/match"
-import browserHistory from "react-router/lib/browserHistory"
-import useScroll from "react-router-scroll/lib/useScroll"
-
-const rootElement = document.getElementById(`react-mount`)
-const rootRoute = require(`./split-child-routes`)
-
-// If you try to load the split-child-routes module in other
-// modules, Webpack freezes in some sort of infinite loop when
-// you try to build the javascript for production. No idea
-// why... so for now we'll pop the routes on window. I hope no
-// one feels overly dirty from reading this ;-)
-if (typeof window !== `undefined`) {
-  window.gatsbyRootRoute = rootRoute
+import {
+  BrowserRouter as Router,
+  Route,
+  withRouter,
+  matchPath,
+} from "react-router-dom"
+import { ScrollContext } from "react-router-scroll"
+import createHistory from "history/createBrowserHistory"
+import pages from "./pages.json"
+window.matchPath = matchPath
+
+import requires from "./async-requires"
+
+console.log(pages)
+console.log(requires)
+
+// Load scripts
+const preferDefault = m => (m && m.default) || m
+const scriptsCache = {}
+const loadScriptsForPath = (path, cb = () => {}) => {
+  console.log(`loading scripts for`, path)
+
+  if (!path) {
+    return cb()
+  }
+
+  if (scriptsCache[path]) {
+    return cb(scriptsCache[path])
+  }
+
+  const page = pages.find(r => r.path === path)
+
+  if (!page) {
+    return cb()
+  }
+
+  console.time(`load scripts`)
+  let scripts = {
+    layout: false,
+    component: false,
+    pageData: false,
+  }
+  const loaded = () => {
+    if (scripts.layout && scripts.component && scripts.pageData) {
+      console.timeEnd(`load scripts`)
+      scriptsCache[path] = scripts
+      cb(scripts)
+    }
+  }
+  requires.layouts.index(layout => {
+    scripts.layout = preferDefault(layout)
+    loaded()
+  })
+  requires.components[page.componentChunkName](component => {
+    scripts.component = preferDefault(component)
+    loaded()
+  })
+  requires.json[page.jsonName](pageData => {
+    scripts.pageData = pageData
+    loaded()
+  })
 }
 
-let currentLocation
-browserHistory.listen(location => {
-  currentLocation = location
+const navigateTo = pathname => {
+  loadScriptsForPath(pathname, () => {
+    window.___history.push(pathname)
+  })
+}
+
+window.___loadScriptsForPath = loadScriptsForPath
+window.___navigateTo = navigateTo
+
+const history = createHistory()
+history.listen((location, action) => {
+  apiRunner(`onRouteUpdate`, location, action)
 })
 
 function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) {
@@ -45,24 +99,77 @@ function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) {
   return true
 }
 
-match(
-  { history: browserHistory, routes: rootRoute },
-  (error, redirectLocation, renderProps) => {
-    const Root = () => (
-      <Router
-        {...renderProps}
-        render={applyRouterMiddleware(useScroll(shouldUpdateScroll))}
-        onUpdate={() => {
-          apiRunner(`onRouteUpdate`, currentLocation)
-        }}
-      />
-    )
-    const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0]
-    ReactDOM.render(
-      <NewRoot />,
-      typeof window !== `undefined`
-        ? document.getElementById(`react-mount`)
-        : void 0
-    )
+// Load 404 page component and scripts
+let notFoundScripts
+loadScriptsForPath(`/404.html`, scripts => {
+  notFoundScripts = scripts
+})
+
+const renderPage = props => {
+  const page = pages.find(page => {
+    if (page.matchPath) {
+      // Try both the path and matchPath
+      return (
+        matchPath(props.location.pathname, { path: page.path }) ||
+        matchPath(props.location.pathname, {
+          path: page.matchPath,
+        })
+      )
+    } else {
+      return matchPath(props.location.pathname, {
+        path: page.path,
+        exact: true,
+      })
+    }
+  })
+  if (page) {
+    return $(scriptsCache[page.path].component, {
+      ...props,
+      ...scriptsCache[page.path].pageData,
+    })
+  } else if (notFoundScripts) {
+    return $(notFoundScripts.component, {
+      ...props,
+      ...notFoundScripts.pageData,
+    })
+  } else {
+    return null
   }
-)
+}
+
+const renderSite = ({ scripts, props }) => {
+  return $(scripts.layout, { ...props }, renderPage(props))
+}
+
+const $ = React.createElement
+
+loadScriptsForPath(window.location.pathname, scripts => {
+  const Root = () =>
+    $(
+      Router,
+      null,
+      $(
+        ScrollContext,
+        { shouldUpdateScroll },
+        $(withRouter(scripts.layout), {
+          children: layoutProps => {
+            return $(Route, {
+              render: routeProps => {
+                window.___history = routeProps.history
+                const props = layoutProps ? layoutProps : routeProps
+                return renderPage(props)
+              },
+            })
+          },
+        })
+      )
+    )
+
+  const NewRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0]
+  ReactDOM.render(
+    <NewRoot />,
+    typeof window !== `undefined`
+      ? document.getElementById(`___gatsby`)
+      : void 0
+  )
+})
diff --git a/packages/gatsby/src/cache-dir/root.js b/packages/gatsby/src/cache-dir/root.js
index 9199eb68571a4..47b0d80ee2e83 100644
--- a/packages/gatsby/src/cache-dir/root.js
+++ b/packages/gatsby/src/cache-dir/root.js
@@ -1,15 +1,22 @@
 import React from "react"
-import { applyRouterMiddleware, Router, browserHistory } from "react-router"
-import useScroll from "react-router-scroll/lib/useScroll"
+import {
+  BrowserRouter as Router,
+  Route,
+  matchPath,
+  withRouter,
+} from "react-router-dom"
+import { ScrollContext } from "react-router-scroll"
+import createHistory from "history/createBrowserHistory"
 
-const apiRunner = require(`./api-runner-browser`)
-const rootRoute = require(`./child-routes`)
-console.log(rootRoute)
+import apiRunner from "./api-runner-browser"
+import syncRequires from "./sync-requires"
+import pages from "./pages.json"
 
-let currentLocation
+console.log(`pages`, pages)
 
-browserHistory.listen(location => {
-  currentLocation = location
+const history = createHistory()
+history.listen((location, action) => {
+  apiRunner(`onRouteUpdate`, location, action)
 })
 
 function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) {
@@ -30,16 +37,74 @@ function shouldUpdateScroll(prevRouterProps, { location: { pathname } }) {
   return true
 }
 
-const Root = () => (
-  <Router
-    history={browserHistory}
-    routes={rootRoute}
-    render={applyRouterMiddleware(useScroll(shouldUpdateScroll))}
-    onUpdate={() => {
-      apiRunner(`onRouteUpdate`, currentLocation)
-    }}
-  />
-)
+const $ = React.createElement
+
+const noMatch = pages.find(r => r.path === `/404.html`)
+
+const addNotFoundRoute = () => {
+  if (noMatch) {
+    return $(Route, {
+      key: `404-page`,
+      component: props =>
+        $(syncRequires.components[noMatch.componentChunkName], {
+          ...props,
+          ...syncRequires.json[noMatch.jsonName],
+        }),
+    })
+  } else {
+    return null
+  }
+}
+
+const navigateTo = pathname => {
+  window.___history.push(pathname)
+}
+
+window.___navigateTo = navigateTo
+
+const Root = () =>
+  $(
+    Router,
+    null,
+    $(
+      ScrollContext,
+      { shouldUpdateScroll },
+      $(withRouter(syncRequires.layouts[`index`]), {
+        children: layoutProps => {
+          return $(Route, {
+            render: routeProps => {
+              window.___history = routeProps.history
+              const props = layoutProps ? layoutProps : routeProps
+              const page = pages.find(page => {
+                if (page.matchPath) {
+                  // Try both the path and matchPath
+                  return (
+                    matchPath(props.location.pathname, { path: page.path }) ||
+                    matchPath(props.location.pathname, {
+                      path: page.matchPath,
+                    })
+                  )
+                } else {
+                  return matchPath(props.location.pathname, {
+                    path: page.path,
+                    exact: true,
+                  })
+                }
+              })
+              if (page) {
+                return $(syncRequires.components[page.componentChunkName], {
+                  ...props,
+                  ...syncRequires.json[page.jsonName],
+                })
+              } else {
+                return addNotFoundRoute()
+              }
+            },
+          })
+        },
+      })
+    )
+  )
 
 // Let site, plugins wrap the site e.g. for Redux.
 const WrappedRoot = apiRunner(`wrapRootComponent`, { Root }, Root)[0]
diff --git a/packages/gatsby/src/cache-dir/static-entry.js b/packages/gatsby/src/cache-dir/static-entry.js
index 0d36095ff13f0..ff822399f3bec 100644
--- a/packages/gatsby/src/cache-dir/static-entry.js
+++ b/packages/gatsby/src/cache-dir/static-entry.js
@@ -1,134 +1,149 @@
 import React from "react"
 import { renderToString, renderToStaticMarkup } from "react-dom/server"
-import { match, RouterContext } from "react-router"
+import { StaticRouter, Route, withRouter } from "react-router-dom"
 import Html from "../src/html"
 import { kebabCase, get, merge } from "lodash"
-import rootRoute from "./child-routes"
 import apiRunner from "./api-runner-ssr"
-import pages from "../public/tmp-pages.json"
+import pages from "./pages.json"
+import syncRequires from "./sync-requires"
 
 const pathChunkName = path => {
   const name = path === `/` ? `index` : kebabCase(path)
   return `path---${name}`
 }
 
+const $ = React.createElement
+
+const filteredPages = pages.filter(r => r.path !== `/404.html`)
+const noMatch = pages.find(r => r.path === `/404.html`)
+
 module.exports = (locals, callback) => {
   let linkPrefix = `/`
   if (__PREFIX_LINKS__) {
     linkPrefix = `${__LINK_PREFIX__}/`
   }
 
-  match(
-    { routes: rootRoute, location: locals.path },
-    (error, redirectLocation, renderProps) => {
-      if (error) {
-        console.log(`error when building page ${locals.path}`, error)
-        callback(error)
-      } else if (renderProps) {
-        const component = <RouterContext {...renderProps} />
-
-        // Let the site or plugin render the page component.
-        const results = apiRunner(
-          `replaceServerBodyRender`,
-          { component, headComponents: [] },
-          {}
-        )
-        let {
-          body,
-          headComponents,
-          postBodyComponents,
-          ...bodyRenderProps
-        } = results[0]
-
-        // If no one stepped up, we'll handle it.
-        if (!body) {
-          body = renderToString(component)
-        }
-
-        // Check if vars were created.
-        if (!bodyRenderProps) {
-          bodyRenderProps = {}
-        }
-        if (!headComponents) {
-          headComponents = []
-        }
-        if (!postBodyComponents) {
-          postBodyComponents = []
-        }
-
-        // Add the chunk-manifest as a head component.
-        const chunkManifest = require(`!raw!../public/chunk-manifest.json`)
-
-        postBodyComponents.unshift(
-          <script
-            id="webpack-manifest"
-            dangerouslySetInnerHTML={{
-              __html: `
+  const component = $(
+    StaticRouter,
+    {
+      location: {
+        pathname: locals.path,
+      },
+    },
+    $(withRouter(syncRequires.layouts[`index`]), {
+      children: layoutProps => {
+        $(Route, {
+          render: routeProps => {
+            const props = layoutProps ? layoutProps : routeProps
+            const page = pages.find(
+              page => page.path === props.location.pathname
+            )
+            return $(syncRequires.components[page.componentChunkName], {
+              ...props,
+              ...syncRequires.json[page.jsonName],
+            })
+          },
+        })
+      },
+    })
+  )
+
+  // Let the site or plugin render the page component.
+  const results = apiRunner(
+    `replaceServerBodyRender`,
+    { component, headComponents: [] },
+    {}
+  )
+  let {
+    body,
+    headComponents,
+    postBodyComponents,
+    ...bodyRenderProps
+  } = results[0]
+
+  // If no one stepped up, we'll handle it.
+  if (!body) {
+    body = renderToString(component)
+  }
+
+  // Check if vars were created.
+  if (!bodyRenderProps) {
+    bodyRenderProps = {}
+  }
+  if (!headComponents) {
+    headComponents = []
+  }
+  if (!postBodyComponents) {
+    postBodyComponents = []
+  }
+
+  // Add the chunk-manifest as a head component.
+  const chunkManifest = require(`!raw!../public/chunk-manifest.json`)
+
+  postBodyComponents.unshift(
+    <script
+      id="webpack-manifest"
+      dangerouslySetInnerHTML={{
+        __html: `
             //<![CDATA[
             window.webpackManifest = ${chunkManifest}
             //]]>
             `,
-            }}
-          />
-        )
-
-        let stats
-        try {
-          stats = require(`../public/stats.json`)
-        } catch (e) {
-          // ignore
-        }
-
-        const dascripts = [
-          `commons`,
-          `app`,
-          pathChunkName(locals.path),
-          pages.find(page => page.path === locals.path).componentChunkName,
-        ]
-        dascripts.forEach(script => {
-          const fetchKey = `assetsByChunkName[${script}][0]`
-          const prefixedScript = `${linkPrefix}${get(stats, fetchKey, ``)}`
-
-          // Add preload <link>s for scripts.
-          headComponents.unshift(
-            <link rel="preload" href={prefixedScript} as="script" />
-          )
-
-          // Add script tags for the bottom of the page.
-          postBodyComponents.push(
-            <script key={prefixedScript} src={prefixedScript} />
-          )
-        })
+      }}
+    />
+  )
+
+  let stats
+  try {
+    stats = require(`../public/stats.json`)
+  } catch (e) {
+    // ignore
+  }
 
-        // Call plugins to let them add to or modify components/props.
-        const pluginHeadComponents = apiRunner(
-          `modifyHeadComponents`,
-          { headComponents },
-          []
-        )
-        headComponents = headComponents.concat(pluginHeadComponents)
-
-        const pluginPostBodyComponents = apiRunner(
-          `modifyPostBodyComponents`,
-          { postBodyComponents },
-          []
-        )
-        postBodyComponents = postBodyComponents.concat(pluginPostBodyComponents)
-
-        const pluginBodyRenderProps = apiRunner(
-          `modifyBodyRenderProps`,
-          { bodyRenderProps },
-          {}
-        )
-        bodyRenderProps = merge(bodyRenderProps, pluginBodyRenderProps)
-
-        const html = `<!DOCTYPE html>\n ${renderToStaticMarkup(<Html {...bodyRenderProps} headComponents={headComponents} postBodyComponents={postBodyComponents} body={body} {...renderProps} />)}`
-        callback(null, html)
-      } else {
-        console.log(`Couldn't match ${locals.path} against your routes. This
-      should NEVER happen.`)
-        callback(null, `FAIL ALERT`)
-      }
-    }
+  const dascripts = [
+    `commons`,
+    `app`,
+    `layout-component---index`,
+    pathChunkName(locals.path),
+    pages.find(page => page.path === locals.path).componentChunkName,
+  ]
+  dascripts.forEach(script => {
+    const fetchKey = `assetsByChunkName[${script}][0]`
+    const prefixedScript = `${linkPrefix}${get(stats, fetchKey, ``)}`
+
+    // Add preload <link>s for scripts.
+    headComponents.unshift(
+      <link rel="preload" href={prefixedScript} as="script" />
+    )
+
+    // Add script tags for the bottom of the page.
+    postBodyComponents.push(
+      <script key={prefixedScript} src={prefixedScript} />
+    )
+  })
+
+  // Call plugins to let them add to or modify components/props.
+  const pluginHeadComponents = apiRunner(
+    `modifyHeadComponents`,
+    { headComponents },
+    []
   )
+  headComponents = headComponents.concat(pluginHeadComponents)
+
+  const pluginPostBodyComponents = apiRunner(
+    `modifyPostBodyComponents`,
+    { postBodyComponents },
+    []
+  )
+  postBodyComponents = postBodyComponents.concat(pluginPostBodyComponents)
+
+  const pluginBodyRenderProps = apiRunner(
+    `modifyBodyRenderProps`,
+    { bodyRenderProps },
+    {}
+  )
+  bodyRenderProps = merge(bodyRenderProps, pluginBodyRenderProps)
+
+  const html = `<!DOCTYPE html>\n ${renderToStaticMarkup(<Html {...bodyRenderProps} headComponents={headComponents} postBodyComponents={postBodyComponents} body={body} path={locals.path} />)}`
+  callback(null, html)
 }
diff --git a/packages/gatsby/src/joi-schemas/joi.js b/packages/gatsby/src/joi-schemas/joi.js
index b039f3a33b6f0..d5451afa370b2 100644
--- a/packages/gatsby/src/joi-schemas/joi.js
+++ b/packages/gatsby/src/joi-schemas/joi.js
@@ -10,6 +10,7 @@ export const gatsbyConfigSchema = Joi.object().keys({
 export const pageSchema = Joi.object()
   .keys({
     path: Joi.string().required(),
+    matchPath: Joi.string(),
     component: Joi.string().required(),
     componentChunkName: Joi.string().required(),
     context: Joi.object(),
diff --git a/packages/gatsby/src/query-runner/index.js b/packages/gatsby/src/query-runner/index.js
index d8f27b9c5378a..8b5ef8137da19 100644
--- a/packages/gatsby/src/query-runner/index.js
+++ b/packages/gatsby/src/query-runner/index.js
@@ -1,4 +1,4 @@
-require(`./route-writer`)
+require(`./pages-writer`)
 const { watch } = require(`./query-watcher`)
 const isInitialPageQueryingDone = require(`./page-query-runner`)
 
diff --git a/packages/gatsby/src/query-runner/route-writer.js b/packages/gatsby/src/query-runner/route-writer.js
deleted file mode 100644
index c6f173b09b3e8..0000000000000
--- a/packages/gatsby/src/query-runner/route-writer.js
+++ /dev/null
@@ -1,251 +0,0 @@
-const _ = require(`lodash`)
-const glob = require(`glob`)
-const parseFilepath = require(`parse-filepath`)
-const fs = require(`fs`)
-
-const { store } = require(`../redux/`)
-import {
-  layoutComponentChunkName,
-  pathChunkName,
-} from "../utils/js-chunk-names"
-
-// Write out routes file.
-// Loop through all paths and write them out to child-routes.js
-const writeChildRoutes = () => {
-  const { program, config, pages } = store.getState()
-  let childRoutes = ``
-  let splitChildRoutes = ``
-
-  const genChildRoute = (page, noPath) => {
-    let pathStr = ``
-    if (!noPath) {
-      pathStr = `path:'${page.path}',`
-    }
-    return `
-      {
-        ${pathStr}
-        component: ${page.internalComponentName},
-      },
-    `
-  }
-
-  const genSplitChildRoute = (page, noPath = false) => {
-    const pathName = pathChunkName(page.path)
-    let pathStr = ``
-    if (!noPath) {
-      if (program.prefixLinks) {
-        pathStr = `path:'${_.get(config, `linkPrefix`, ``)}${page.path}',`
-      } else {
-        pathStr = `path:'${page.path}',`
-      }
-    }
-
-    return `
-      { ${pathStr}
-        getComponent (nextState, cb) {
-          require.ensure([], (require) => {
-            const Component = preferDefault(require('${page.component}'))
-            require.ensure([], (require) => {
-              const data = require('./json/${page.jsonName}')
-              cb(null, () => <Component {...nextState} {...data} />)
-            }, '${pathName}')
-          }, '${page.componentChunkName}')
-        }
-      },
-    `
-  }
-
-  // Group pages under their layout component (if any).
-  let defaultLayoutExists = true
-  if (glob.sync(`${program.directory}/src/layouts/default.*`).length === 0) {
-    defaultLayoutExists = false
-  }
-  const groupedPages = _.groupBy(pages, page => {
-    // If is a string we'll assume it's a working layout component.
-    if (_.isString(page.layout)) {
-      return page.layout
-      // If the user explicitely turns off layout, put page in undefined bucket.
-    } else if (page.layout === false) {
-      return `undefined`
-      // Otherwise assume the default layout should handle this page.
-    } else if (defaultLayoutExists) {
-      return `default`
-      // We got nothing left, undefined.
-    } else {
-      return `undefined`
-    }
-  })
-  let rootRoute = `{ childRoutes: [` // We close this out at the bottom.
-  let splitRootRoute = `{ childRoutes: [` // We close this out at the bottom.
-  _.forEach(groupedPages, (pages, layout) => {
-    let route = `{`
-    let splitRoute = `{`
-    if (layout === `undefined`) {
-      // If a layout isn't defined then don't provide an index route, etc.
-      route += `childRoutes: [`
-      splitRoute += `childRoutes: [`
-      pages.forEach(page => {
-        route += genChildRoute(page)
-        splitRoute += genSplitChildRoute(page)
-      })
-      route += `]},`
-      splitRoute += `]},`
-      rootRoute += route
-      splitRootRoute += splitRoute
-    } else {
-      let indexPage
-      indexPage = pages.find(
-        page => parseFilepath(page.component).name === `index`
-      )
-
-      // If there's not an index page, just pick the one with the shortest path.
-      // Probably a bad heuristic.
-      if (!indexPage) {
-        indexPage = _(pages).sortBy(pages, page => page.path.length).first()
-      }
-      let route = `
-      {
-        path: '${indexPage.path}',
-        component: preferDefault(require('${program.directory}/src/layouts/${layout}')),
-        indexRoute: ${genChildRoute(indexPage, true)}
-        childRoutes: [
-      `
-      let pathStr
-      if (program.prefixLinks) {
-        pathStr = `path:'${_.get(config, `linkPrefix`, ``)}${indexPage.path}',`
-      } else {
-        pathStr = `path:'${indexPage.path}',`
-      }
-      let splitRoute = `
-      {
-        ${pathStr}
-        component: preferDefault(require('${program.directory}/src/layouts/${layout}')),
-        indexRoute: ${genSplitChildRoute(indexPage, true)}
-        childRoutes: [
-      `
-      pages.forEach(page => {
-        route += genChildRoute(page)
-        splitRoute += genSplitChildRoute(page)
-      })
-
-      route += `]},`
-      splitRoute += `]},`
-      rootRoute += route
-      splitRootRoute += splitRoute
-    }
-  })
-
-  // Add a fallback 404 route if one is defined.
-  const notFoundPage = pages.find(page => page.path.indexOf(`/404`) !== -1)
-
-  if (notFoundPage) {
-    const defaultLayout = `preferDefault(require('${program.directory}/src/layouts/default'))`
-    const notFoundPageStr = `
-      {
-        path: "*",
-        component: ${defaultLayout},
-        indexRoute: {
-          component: preferDefault(require('${notFoundPage.component}')),
-        },
-      },
-    `
-    const pathName = pathChunkName(notFoundPage.path)
-    const layoutName = layoutComponentChunkName(
-      program.directory,
-      notFoundPage.component
-    )
-    const notFoundPageSplitStr = `
-      {
-        path: "*",
-        component: ${defaultLayout},
-        indexRoute: {
-          getComponent (nextState, cb) {
-            require.ensure([], (require) => {
-              const Component = preferDefault(require('${notFoundPage.component}'))
-              require.ensure([], (require) => {
-                const data = require('./json/${notFoundPage.jsonName}')
-                cb(null, () => <Component {...nextState} {...data} />)
-              }, '${pathName}')
-            }, '${layoutName}')
-          }
-        },
-      },
-    `
-
-    rootRoute += notFoundPageStr
-    splitRootRoute += notFoundPageSplitStr
-  }
-
-  // Close out object.
-  rootRoute += `]}`
-  splitRootRoute += `]}`
-  const componentsStr = pages
-    .map(page => {
-      return `class ${page.internalComponentName} extends React.Component {
-          render () {
-            const Component = preferDefault(require('${page.component}'))
-            const data = require('./json/${page.jsonName}')
-            return <Component {...this.props} {...data} />
-          }
-        }`
-    })
-    .join(`\n`)
-
-  childRoutes = `
-    import React from 'react'
-
-    // prefer default export if available
-    const preferDefault = m => m && m.default || m
-
-    /**
-     * Warning from React Router, caused by react-hot-loader.
-     * The warning can be safely ignored, so filter it from the console.
-     * Otherwise you'll see it every time something changes.
-     * See https://github.com/gaearon/react-hot-loader/issues/298
-     */
-    if (module.hot) {
-        const isString = require('lodash/isString')
-
-      const orgError = console.error;
-      console.error = (...args) => {
-      if (args && args.length === 1 && isString(args[0]) && args[0].indexOf('You cannot change <Router routes>;') > -1) {
-        // React route changed
-      } else {
-        // Log the error as normally
-        orgError.apply(console, args);
-      }
-      };
-    }
-
-    ${componentsStr}
-    const rootRoute = ${rootRoute}
-    module.exports = rootRoute`
-  splitChildRoutes = `
-    import React from 'react'
-
-    // prefer default export if available
-    const preferDefault = m => m && m.default || m
-    const rootRoute = ${splitRootRoute}
-    module.exports = rootRoute`
-  fs.writeFileSync(`${program.directory}/.cache/child-routes.js`, childRoutes)
-  fs.writeFileSync(
-    `${program.directory}/.cache/split-child-routes.js`,
-    splitChildRoutes
-  )
-}
-
-let writtenOnce = false
-let oldPages
-const writeRoutes = _.debounce(() => {
-  if (!writtenOnce || !_.isEqual(oldPages, store.getState().pages)) {
-    writeChildRoutes()
-    writtenOnce = true
-    oldPages = store.getState().pages
-  }
-}, 250)
-
-store.subscribe(() => {
-  if (store.getState().lastAction.type === `UPSERT_PAGE`) {
-    writeRoutes()
-  }
-})
diff --git a/packages/gatsby/src/schema/build-node-types.js b/packages/gatsby/src/schema/build-node-types.js
index 75c5d9af9404f..5fcb35a1d0f30 100644
--- a/packages/gatsby/src/schema/build-node-types.js
+++ b/packages/gatsby/src/schema/build-node-types.js
@@ -17,7 +17,7 @@ const { nodeInterface } = require(`./node-interface`)
 const { getNodes, getNode, getNodeAndSavePathDependency } = require(`../redux`)
 const { addPageDependency } = require(`../redux/actions/add-page-dependency`)
 
-import type { ProcessedNodeType } from './infer-graphql-type'
+import type { ProcessedNodeType } from "./infer-graphql-type"
 
 type TypeMap = { [typeName: string]: ProcessedNodeType }
 
diff --git a/packages/gatsby/src/schema/infer-graphql-input-fields.js b/packages/gatsby/src/schema/infer-graphql-input-fields.js
index 68bc44be030ae..a82fd0f03f638 100644
--- a/packages/gatsby/src/schema/infer-graphql-input-fields.js
+++ b/packages/gatsby/src/schema/infer-graphql-input-fields.js
@@ -23,7 +23,7 @@ const {
 import type {
   GraphQLInputFieldConfig,
   GraphQLInputFieldConfigMap,
-} from 'graphql/type/definition'
+} from "graphql/type/definition"
 
 function typeFields(type): GraphQLInputFieldConfigMap {
   switch (type) {
diff --git a/packages/gatsby/src/schema/infer-graphql-type.js b/packages/gatsby/src/schema/infer-graphql-type.js
index 3298744f1661c..08b683b975f98 100644
--- a/packages/gatsby/src/schema/infer-graphql-type.js
+++ b/packages/gatsby/src/schema/infer-graphql-type.js
@@ -25,11 +25,11 @@ const {
   isEmptyObjectOrArray,
 } = require(`./data-tree-utils`)
 
-import type { GraphQLOutputType } from 'graphql'
+import type { GraphQLOutputType } from "graphql"
 import type {
   GraphQLFieldConfig,
   GraphQLFieldConfigMap,
-} from 'graphql/type/definition'
+} from "graphql/type/definition"
 
 export type ProcessedNodeType = {
   name: string,
diff --git a/packages/gatsby/src/schema/node-interface.js b/packages/gatsby/src/schema/node-interface.js
index 097fe2c0a36e0..d91571af6f634 100644
--- a/packages/gatsby/src/schema/node-interface.js
+++ b/packages/gatsby/src/schema/node-interface.js
@@ -4,7 +4,7 @@ import {
   GraphQLID,
   GraphQLList,
   GraphQLInterfaceType,
-} from 'graphql'
+} from "graphql"
 
 export const nodeInterface = new GraphQLInterfaceType({
   name: `Node`,
diff --git a/packages/gatsby/src/schema/site-schema.js b/packages/gatsby/src/schema/site-schema.js
index a8643a2b97596..9bc90c156963c 100644
--- a/packages/gatsby/src/schema/site-schema.js
+++ b/packages/gatsby/src/schema/site-schema.js
@@ -1,8 +1,8 @@
 // @flow
-import { GraphQLObjectType, GraphQLString } from 'graphql'
-import moment from 'moment'
+import { GraphQLObjectType, GraphQLString } from "graphql"
+import moment from "moment"
 
-import { inferObjectStructureFromNodes } from './infer-graphql-type'
+import { inferObjectStructureFromNodes } from "./infer-graphql-type"
 const { store } = require(`../redux`)
 
 module.exports = () => {
diff --git a/packages/gatsby/src/utils/build.js b/packages/gatsby/src/utils/build.js
index 0ef932d5e43e2..396a8282bf225 100644
--- a/packages/gatsby/src/utils/build.js
+++ b/packages/gatsby/src/utils/build.js
@@ -30,12 +30,6 @@ async function html(program: any) {
   })
 
   console.log(`Generating Static HTML`)
-  // Write out pages data to file so it's available to the static-entry.js
-  // file.
-  fs.writeFileSync(
-    `${program.directory}/public/tmp-pages.json`,
-    JSON.stringify(store.getState().pages)
-  )
   await buildHTML(program).catch(err => {
     console.log(``)
     console.log(`Generating HTML failed`)
diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js
index e42d56b2cabec..c98312e264545 100644
--- a/packages/gatsby/src/utils/webpack.config.js
+++ b/packages/gatsby/src/utils/webpack.config.js
@@ -15,7 +15,6 @@ const { store } = require(`../redux`)
 const debug = require(`debug`)(`gatsby:webpack-config`)
 const WebpackMD5Hash = require(`webpack-md5-hash`)
 const ChunkManifestPlugin = require(`chunk-manifest-webpack-plugin`)
-const { layoutComponentChunkName } = require(`./js-chunk-names`)
 const genBabelConfig = require(`./babel-config`)
 
 // Five stages or modes:
@@ -164,11 +163,11 @@ module.exports = async (
         ]
       case `build-javascript`: {
         // Get array of page template component names.
-        let components = store.getState().pages.map(page => page.component)
-        components = components.map(component =>
-          layoutComponentChunkName(program.directory, component)
-        )
+        let components = store
+          .getState()
+          .pages.map(page => page.componentChunkName)
         components = uniq(components)
+        components.push(`layout-component---index`)
         return [
           // Moment.js includes 100s of KBs of extra localization data
           // by default in Webpack that most sites don't want.
@@ -199,7 +198,9 @@ module.exports = async (
                 `react`,
                 `react-dom`,
                 `react-router`,
+                `react-router-dom`,
                 `react-router-scroll`,
+                `path-to-regexp`,
                 `scroll-behavior`,
                 `history`,
               ]
diff --git a/packages/graphql-skip-limit/src/connection/__tests__/arrayconnection.js b/packages/graphql-skip-limit/src/connection/__tests__/arrayconnection.js
index 3141840121101..774625bc014b8 100644
--- a/packages/graphql-skip-limit/src/connection/__tests__/arrayconnection.js
+++ b/packages/graphql-skip-limit/src/connection/__tests__/arrayconnection.js
@@ -3,7 +3,7 @@
 import {
   connectionFromArray,
   connectionFromPromisedArray,
-} from '../arrayconnection'
+} from "../arrayconnection"
 
 describe(`connectionFromArray()`, () => {
   const letters = [`A`, `B`, `C`, `D`, `E`]
@@ -105,10 +105,7 @@ describe(`connectionFromArray()`, () => {
 
   describe(`pagination`, () => {
     it(`respects limit and skip`, () => {
-      const c = connectionFromArray(
-        letters,
-        { limit: 2, skip: 2 }
-      )
+      const c = connectionFromArray(letters, { limit: 2, skip: 2 })
       return expect(c).toEqual({
         edges: [
           {
@@ -129,10 +126,7 @@ describe(`connectionFromArray()`, () => {
     })
 
     it(`respects limit and skip with large skip`, () => {
-      const c = connectionFromArray(
-        letters,
-        { limit: 10, skip: 2 }
-      )
+      const c = connectionFromArray(letters, { limit: 10, skip: 2 })
       return expect(c).toEqual({
         edges: [
           {
diff --git a/packages/graphql-skip-limit/src/connection/__tests__/connection.js b/packages/graphql-skip-limit/src/connection/__tests__/connection.js
index 8cc0ac5d3dd68..926881ac33ce8 100644
--- a/packages/graphql-skip-limit/src/connection/__tests__/connection.js
+++ b/packages/graphql-skip-limit/src/connection/__tests__/connection.js
@@ -4,16 +4,11 @@ import {
   GraphQLSchema,
   GraphQLString,
   graphql,
-} from 'graphql'
+} from "graphql"
 
-import {
-  connectionFromArray,
-} from '../arrayconnection.js'
+import { connectionFromArray } from "../arrayconnection.js"
 
-import {
-  connectionArgs,
-  connectionDefinitions,
-} from '../connection.js'
+import { connectionArgs, connectionDefinitions } from "../connection.js"
 
 const allUsers = [
   { name: `Dan`, friends: [1, 2, 3, 4] },
diff --git a/packages/graphql-skip-limit/src/connection/arrayconnection.js b/packages/graphql-skip-limit/src/connection/arrayconnection.js
index ef8d7a88a721f..3402761c4e4c9 100644
--- a/packages/graphql-skip-limit/src/connection/arrayconnection.js
+++ b/packages/graphql-skip-limit/src/connection/arrayconnection.js
@@ -1,16 +1,13 @@
 /* @flow */
 
-import type {
-  Connection,
-  ConnectionArguments,
-} from './connectiontypes'
+import type { Connection, ConnectionArguments } from "./connectiontypes"
 
 /**
  * A simple function that accepts an array and connection arguments, and returns
  * a connection object for use in GraphQL. It uses array offsets as pagination,
  * so pagination will only work if the array is static.
  */
-export function connectionFromArray<T> (
+export function connectionFromArray<T>(
   data: Array<T>,
   args: ConnectionArguments
 ): Connection<T> {
@@ -30,7 +27,7 @@ export function connectionFromArray<T> (
       throw new Error(`Argument "limit" must be a non-negative integer`)
     }
 
-    endSlice = (startSlice + limit)
+    endSlice = startSlice + limit
   }
 
   const slice = data.slice(startSlice, endSlice)
@@ -51,12 +48,12 @@ export function connectionFromArray<T> (
     }
   })
 
-
   return {
     edges,
     pageInfo: {
-      hasNextPage:
-        typeof limit === `number` ? (limit + startSlice) - 1 < data.length : false,
+      hasNextPage: typeof limit === `number`
+        ? limit + startSlice - 1 < data.length
+        : false,
     },
   }
 }
@@ -65,7 +62,7 @@ export function connectionFromArray<T> (
  * A version of `connectionFromArray` that takes a promised array, and returns a
  * promised connection.
  */
-export function connectionFromPromisedArray<T> (
+export function connectionFromPromisedArray<T>(
   dataPromise: Promise<Array<T>>,
   args: ConnectionArguments
 ): Promise<Connection<T>> {
diff --git a/packages/graphql-skip-limit/src/connection/connection.js b/packages/graphql-skip-limit/src/connection/connection.js
index b80a6617b8aee..b032dc26bb348 100644
--- a/packages/graphql-skip-limit/src/connection/connection.js
+++ b/packages/graphql-skip-limit/src/connection/connection.js
@@ -6,14 +6,14 @@ import {
   GraphQLNonNull,
   GraphQLList,
   GraphQLObjectType,
-} from 'graphql'
+} from "graphql"
 
 import type {
   GraphQLFieldConfigArgumentMap,
   GraphQLFieldConfigMap,
   GraphQLFieldResolver,
   Thunk,
-} from 'graphql'
+} from "graphql"
 
 /**
  * Returns a GraphQLFieldConfigArgumentMap appropriate to include on a field
@@ -34,12 +34,12 @@ type ConnectionConfig = {
   resolveNode?: ?GraphQLFieldResolver<*, *>,
   edgeFields?: ?Thunk<GraphQLFieldConfigMap<*, *>>,
   connectionFields?: ?Thunk<GraphQLFieldConfigMap<*, *>>,
-};
+}
 
 type GraphQLConnectionDefinitions = {
   edgeType: GraphQLObjectType,
-  connectionType: GraphQLObjectType
-};
+  connectionType: GraphQLObjectType,
+}
 
 /**
  * The common page info type used by all connections.
@@ -55,7 +55,7 @@ const pageInfoType = new GraphQLObjectType({
   }),
 })
 
-function resolveMaybeThunk<T> (thingOrThunk: Thunk<T>): T {
+function resolveMaybeThunk<T>(thingOrThunk: Thunk<T>): T {
   return typeof thingOrThunk === `function` ? thingOrThunk() : thingOrThunk
 }
 
@@ -63,7 +63,7 @@ function resolveMaybeThunk<T> (thingOrThunk: Thunk<T>): T {
  * Returns a GraphQLObjectType for a connection with the given name,
  * and whose nodes are of the specified type.
  */
-export function connectionDefinitions (
+export function connectionDefinitions(
   config: ConnectionConfig
 ): GraphQLConnectionDefinitions {
   const { nodeType } = config
diff --git a/packages/graphql-skip-limit/src/connection/connectiontypes.js b/packages/graphql-skip-limit/src/connection/connectiontypes.js
index 182af764e3483..9717d2943fe14 100644
--- a/packages/graphql-skip-limit/src/connection/connectiontypes.js
+++ b/packages/graphql-skip-limit/src/connection/connectiontypes.js
@@ -5,30 +5,30 @@
  */
 export type PageInfo = {
   hasPreviousPage: ?boolean,
-  hasNextPage: ?boolean
-};
+  hasNextPage: ?boolean,
+}
 
 /**
  * A flow type designed to be exposed as a `Connection` over GraphQL.
  */
 export type Connection<T> = {
-  edges: Array<Edge<T>>;
-  pageInfo: PageInfo;
-};
+  edges: Array<Edge<T>>,
+  pageInfo: PageInfo,
+}
 
 /**
  * A flow type designed to be exposed as a `Edge` over GraphQL.
  */
 export type Edge<T> = {
-  node: T;
-  next: T;
-  previous: T;
-};
+  node: T,
+  next: T,
+  previous: T,
+}
 
 /**
  * A flow type describing the arguments a connection field receives in GraphQL.
  */
 export type ConnectionArguments = {
-  skip?: ?number;
-  limit?: ?number;
-};
+  skip?: ?number,
+  limit?: ?number,
+}
diff --git a/www/src/html.js b/www/src/html.js
index 20b4e17acdf52..45187dcb9f9f7 100644
--- a/www/src/html.js
+++ b/www/src/html.js
@@ -87,7 +87,7 @@ module.exports = React.createClass({
         </head>
         <body>
           <div
-            id="react-mount"
+            id="___gatsby"
             dangerouslySetInnerHTML={{ __html: this.props.body }}
           />
           {this.props.postBodyComponents}
diff --git a/www/src/layouts/default.js b/www/src/layouts/index.js
similarity index 99%
rename from www/src/layouts/default.js
rename to www/src/layouts/index.js
index a4388b35d6f2a..bf049bd55d8dd 100644
--- a/www/src/layouts/default.js
+++ b/www/src/layouts/index.js
@@ -250,7 +250,7 @@ module.exports = React.createClass({
               },
             }}
           >
-            {this.props.children}
+            {this.props.children()}
           </div>
         </div>
         <div
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 5fac5e0db1b83..33e674c41b852 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -1,5 +1,5 @@
 import React from "react"
-import Link from "react-router/lib/Link"
+import Link from "gatsby-link"
 
 const IndexRoute = React.createClass({
   render() {
diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
index b8d8a8b5a663b..73145c591c276 100644
--- a/www/src/templates/template-blog-post.js
+++ b/www/src/templates/template-blog-post.js
@@ -6,7 +6,6 @@ import typography, { rhythm, scale } from "../utils/typography"
 
 const BlogPostTemplate = React.createClass({
   render() {
-    console.log(this.props)
     const post = this.props.data.markdownRemark
     const twitterLine = post.frontmatter.author.twitter
       ? ` by ${post.frontmatter.author.twitter}`