Merge pull request #2883 from taion/client-match-async

Improve support for server rendering async routes

Author: taion

modules/Router.js

@@ -41,12 +41,10 @@ const Router = React.createClass({
   },
 
   getInitialState() {
-    return {
-      location: null,
-      routes: null,
-      params: null,
-      components: null
-    }
+    // Use initial state from renderProps when available, to allow using match
+    // on client side when doing server-side rendering.
+    const { location, routes, params, components } = this.props
+    return { location, routes, params, components }
   },
 
   handleError(error) {

modules/__tests__/_bc-serverRendering-test.js

@@ -1,9 +1,10 @@
 import expect from 'expect'
 import React, { Component } from 'react'
 import { renderToString } from 'react-dom/server'
-import match from '../match'
-import RouterContext from '../RouterContext'
+
 import Link from '../Link'
+import match from '../match'
+import RoutingContext from '../RoutingContext'
 
 describe('v1 server rendering', function () {
 
@@ -68,7 +69,7 @@ describe('v1 server rendering', function () {
   it('works', function (done) {
     match({ routes, location: '/dashboard' }, function (error, redirectLocation, renderProps) {
       const string = renderToString(
-        <RouterContext {...renderProps} />
+        <RoutingContext {...renderProps} />
       )
       expect(string).toMatch(/The Dashboard/)
       done()
@@ -78,7 +79,7 @@ describe('v1 server rendering', function () {
   it('renders active Links as active', function (done) {
     match({ routes, location: '/about' }, function (error, redirectLocation, renderProps) {
       const string = renderToString(
-        <RouterContext {...renderProps} />
+        <RoutingContext {...renderProps} />
       )
       expect(string).toMatch(/about-is-active/)
       expect(string).toNotMatch(/dashboard-is-active/)

modules/__tests__/serverRendering-test.js

@@ -1,10 +1,12 @@
 import expect, { spyOn } from 'expect'
 import React, { Component } from 'react'
-import { renderToString } from 'react-dom/server'
-import match from '../match'
+import { renderToStaticMarkup, renderToString } from 'react-dom/server'
+
 import createMemoryHistory from '../createMemoryHistory'
-import RouterContext from '../RouterContext'
 import Link from '../Link'
+import match from '../match'
+import Router from '../Router'
+import RouterContext from '../RouterContext'
 
 describe('server rendering', function () {
 
@@ -43,6 +45,16 @@ describe('server rendering', function () {
     }
   }
 
+  class Async extends Component {
+    render() {
+      return (
+        <div className="Async">
+          <h1>Async</h1>
+        </div>
+      )
+    }
+  }
+
   const DashboardRoute = {
     path: '/dashboard',
     component: Dashboard
@@ -60,13 +72,20 @@ describe('server rendering', function () {
     }
   }
 
+  const AsyncRoute = {
+    path: '/async',
+    getComponent(location, cb) {
+      setTimeout(cb(null, Async))
+    }
+  }
+
   const routes = {
     path: '/',
     component: App,
-    childRoutes: [ DashboardRoute, AboutRoute, RedirectRoute ]
+    childRoutes: [ DashboardRoute, AboutRoute, RedirectRoute, AsyncRoute ]
   }
 
-  it('works', function (done) {
+  it('works for synchronous route', function (done) {
     match({ routes, location: '/dashboard' }, function (error, redirectLocation, renderProps) {
       const string = renderToString(
         <RouterContext {...renderProps} />
@@ -76,6 +95,16 @@ describe('server rendering', function () {
     })
   })
 
+  it('works for asynchronous route', function (done) {
+    match({ routes, location: '/async' }, function (error, redirectLocation, renderProps) {
+      const string = renderToString(
+        <RouterContext {...renderProps} />
+      )
+      expect(string).toMatch(/Async/)
+      done()
+    })
+  })
+
   it('accepts a custom history', function (done) {
     const history = createMemoryHistory()
     const spy = spyOn(history, 'createLocation').andCallThrough()
@@ -122,4 +151,35 @@ describe('server rendering', function () {
     })
   })
 
+  describe('server/client consistency', function () {
+    // Just render to static markup here to avoid having to normalize markup.
+
+    it('should match for synchronous route', function (done) {
+      match({ routes, location: '/dashboard' }, function (error, redirectLocation, renderProps) {
+        const serverString = renderToStaticMarkup(
+          <RouterContext {...renderProps} />
+        )
+        const browserString = renderToStaticMarkup(
+          <Router {...renderProps} history={createMemoryHistory('/dashboard')} />
+        )
+
+        expect(browserString).toEqual(serverString)
+        done()
+      })
+    })
+
+    it('should match for asynchronous route', function (done) {
+      match({ routes, location: '/async' }, function (error, redirectLocation, renderProps) {
+        const serverString = renderToStaticMarkup(
+          <RouterContext {...renderProps} />
+        )
+        const browserString = renderToStaticMarkup(
+          <Router {...renderProps} history={createMemoryHistory('/async')} />
+        )
+
+        expect(browserString).toEqual(serverString)
+        done()
+      })
+    })
+  })
 })