Fix server-rendering API

Author: mjackson

docs/guides/advanced/ServerRendering.md

@@ -1,45 +1,38 @@
 # Server Rendering
 
-Server rendering is a bit different than in a client because you'll want
-to:
+Server rendering is a bit different than in a client because you'll want to:
 
 - Send `500` responses for errors
 - Send `30x` responses for redirects
 - Fetch data before rendering (and use the router to help you do it)
 
-To facilitate these needs, you drop one level lower than the [`<Router/>`](/docs/API.md#Router)
-API with:  
+To facilitate these needs, you drop one level lower than the [`<Router>`](/docs/API.md#Router) API with:  
 
-- `createMemoryHistory` from the history package
 - `match` to match the routes to a location without rendering
 - `RoutingContext` for synchronous rendering of route components
 
 It looks something like this with an imaginary JavaScript server:
 
 ```js
-import createMemoryHistory from 'history/lib/createMemoryHistory'
-import { RoutingContext, match } from 'react-router'
-import routes from './routes'
 import { renderToString } from 'react-dom/server'
+import { match, RoutingContext } from 'react-router'
+import routes from './routes'
 
 serve((req, res) => {
-  const history = createMemoryHistory()
-  const location = history.createLocation(req.url)
-
-  match({ routes, history, location }, (error, redirectLocation, renderProps) => {
-    if (redirectLocation)
-      res.redirect(301, redirectLocation.pathname + redirectLocation.search)
-    else if (error)
+  // Note that req.url here should be the full URL path from
+  // the original request, including the query string.
+  match(req.url, (error, redirectLocation, renderProps) => {
+    if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
+    } else if (error) {
       res.send(500, error.message)
-    else if (renderProps == null)
+    } else if (renderProps == null) {
       res.send(404, 'Not found')
-    else
-      res.send(renderToString(<RoutingContext {...renderProps}/>))
+    } else {
+      res.send(200, renderToString(<RoutingContext {...renderProps} />))
+    }
   })
 })
 ```
 
-For data loading, you can use the `renderProps` argument to build whatever
-convention you want--like adding static `load` methods to your route
-components, or putting data loading functions on the routes, it's up to
-you.
+For data loading, you can use the `renderProps` argument to build whatever convention you want--like adding static `load` methods to your route components, or putting data loading functions on the routes--it's up to you.

modules/__tests__/serverRendering-test.js

@@ -2,9 +2,8 @@
 /*eslint react/prop-types: 0*/
 import expect from 'expect'
 import React from 'react'
-import createMemoryHistory from 'history/lib/createMemoryHistory'
-import RoutingContext from '../RoutingContext'
 import match from '../match'
+import RoutingContext from '../RoutingContext'
 import Link from '../Link'
 
 describe('server rendering', function () {
@@ -71,9 +70,7 @@ describe('server rendering', function () {
   })
 
   it('works', function (done) {
-    const history = createMemoryHistory()
-    const location = history.createLocation('/dashboard')
-    match({ routes, history, location }, function (error, redirectLocation, renderProps) {
+    match({ routes, location: '/dashboard' }, function (error, redirectLocation, renderProps) {
       const string = React.renderToString(
         <RoutingContext {...renderProps} />
       )
@@ -83,9 +80,7 @@ describe('server rendering', function () {
   })
 
   it('renders active Links as active', function (done) {
-    const history = createMemoryHistory()
-    const location = history.createLocation('/about')
-    match({ routes, history, location }, function (error, redirectLocation, renderProps) {
+    match({ routes, location: '/about' }, function (error, redirectLocation, renderProps) {
       const string = React.renderToString(
         <RoutingContext {...renderProps} />
       )
@@ -96,9 +91,7 @@ describe('server rendering', function () {
   })
 
   it('sends the redirect location', function (done) {
-    const history = createMemoryHistory()
-    const location = history.createLocation('/company')
-    match({ routes, history, location }, function (error, redirectLocation) {
+    match({ routes, location: '/company' }, function (error, redirectLocation) {
       expect(redirectLocation).toExist()
       expect(redirectLocation.pathname).toEqual('/about')
       expect(redirectLocation.search).toEqual('')
@@ -109,9 +102,7 @@ describe('server rendering', function () {
   })
 
   it('sends null values when no routes match', function (done) {
-    const history = createMemoryHistory()
-    const location = history.createLocation('/no-match')
-    match({ routes, history, location }, function (error, redirectLocation, state) {
+    match({ routes, location: '/no-match' }, function (error, redirectLocation, state) {
       expect(error).toNotExist()
       expect(redirectLocation).toNotExist()
       expect(state).toNotExist()

modules/match.js

@@ -1,25 +1,21 @@
-import createMemoryHistory from 'history/lib/createMemoryHistory'
-import useRoutes from './useRoutes'
+import createHistory from 'history/lib/createMemoryHistory'
 import { createRoutes } from './RouteUtils'
+import useRoutes from './useRoutes'
 
 function match({
   routes,
-  history,
   location,
   parseQueryString,
   stringifyQuery
-}, cb) {
-  let createHistory = history ? () => history : createMemoryHistory
-
-  let staticHistory = useRoutes(createHistory)({
+}, callback) {
+  let history = useRoutes(createHistory)({
     routes: createRoutes(routes),
     parseQueryString,
     stringifyQuery
   })
 
-  staticHistory.match(location, function (error, nextLocation, nextState) {
-    let renderProps = nextState ? { ...nextState, history: staticHistory } : null
-    cb(error, nextLocation, renderProps)
+  history.match(location, function (error, redirectLocation, nextState) {
+    callback(error, redirectLocation, nextState && { ...nextState, history })
   })
 }
 

modules/useRoutes.js

@@ -19,10 +19,12 @@ function hasAnyProperties(object) {
  * Returns a new createHistory function that may be used to create
  * history objects that know about routing.
  *
- * - isActive(pathname, query)
- * - match(location, (error, nextState, nextLocation) => {})
- * - listenBeforeLeavingRoute(route, (?nextLocation) => {})
+ * Enhances history objects with the following methods:
+ *
  * - listen((error, nextState) => {})
+ * - listenBeforeLeavingRoute(route, (nextLocation) => {})
+ * - match(location, (error, redirectLocation, nextState) => {})
+ * - isActive(pathname, query, indexOnly=false)
  */
 function useRoutes(createHistory) {
   return function (options={}) {
@@ -34,13 +36,23 @@ function useRoutes(createHistory) {
       return _isActive(pathname, query, indexOnly, state.location, state.routes, state.params)
     }
 
+    function createLocationFromRedirectInfo({ pathname, query, state }) {
+      return history.createLocation(
+        history.createPath(pathname, query), state, REPLACE
+      )
+    }
+
     let partialNextState
 
     function match(location, callback) {
       if (partialNextState && partialNextState.location === location) {
         // Continue from where we left off.
         finishMatch(partialNextState, callback)
       } else {
+        // Allow match(path)
+        if (typeof location === 'string')
+          location = history.createLocation(location)
+
         matchRoutes(routes, location, function (error, nextState) {
           if (error) {
             callback(error)
@@ -53,12 +65,6 @@ function useRoutes(createHistory) {
       }
     }
 
-    function createLocationFromRedirectInfo({ pathname, query, state }) {
-      return history.createLocation(
-        history.createPath(pathname, query), state, REPLACE, history.createKey()
-      )
-    }
-
     function finishMatch(nextState, callback) {
       let { leaveRoutes, enterRoutes } = computeChangedRoutes(state, nextState)
 
@@ -75,7 +81,9 @@ function useRoutes(createHistory) {
             if (error) {
               callback(error)
             } else {
-              callback(null, null, { ...nextState, components })
+              // TODO: Make match a pure function and have some other API
+              // for "match and update state".
+              callback(null, null, (state = { ...nextState, components }))
             }
           })
         }
@@ -221,18 +229,18 @@ function useRoutes(createHistory) {
         if (state.location === location) {
           listener(null, state)
         } else {
-          match(location, function (error, nextLocation, nextState) {
+          match(location, function (error, redirectLocation, nextState) {
             if (error) {
               listener(error)
-            } else if (nextLocation) {
-              history.transitionTo(nextLocation)
+            } else if (redirectLocation) {
+              history.transitionTo(redirectLocation)
             } else if (nextState) {
-              listener(null, (state = nextState))
+              listener(null, nextState)
             } else {
               warning(
                 false,
                 'Location "%s" did not match any routes',
-                location.pathname + location.search
+                location.pathname + location.search + location.hash
               )
             }
           })

package.json

@@ -25,7 +25,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "history": "^1.12.0",
+    "history": "1.12.1",
     "invariant": "^2.0.0",
     "warning": "^2.0.0"
   },