Client Routing (using react-router) and Server-Side Routing

javascript, react-router, reactjs, routes, url-routing

Solution

Note, this answer covers React Router version 0.13.x - the upcoming version 1.0 looks like it will have significantly different implementation details

Server

This is a minimal `server.js` with react-router:

var express = require('express')
var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

var app = express()

// ...express config...

app.use(function(req, res, next) {
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var html = React.renderToString(<Handler/>)
    return res.render('react_page', {html: html})
  })
})

Where the `routes` module exports a list of Routes:

var React = require('react')
var {DefaultRoute, NotFoundRoute, Route} = require('react-router')

module.exports = [
  <Route path="/" handler={require('./components/App')}>
    {/* ... */}
  </Route>
]

Every time a request is made to the server, you create a single-use `Router` instance configured with the incoming URL as its static location, which is resolved against the tree of routes to set up the appropriate matched routes, calling back with the top-level route handler to be rendered and a record of which child routes matched at each level. This is what's consulted when you use the `<RouteHandler>` component within a route handling component to render a child route which was matched.

If the user has JavaScript turned off, or it's being slow to load, any links they click on will hit the server again, which is resolved again as above.

Client

This is a minimal `client.js` with react-router (re-using the same routes module):

var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
  React.render(<Handler/>, document.body)
})

When you call `Router.run()`, it creates a Router instance for you behind the scenes, which is re-used every time you navigate around the app, as the URL can be dynamic on the client, as opposed to on the server where a single request has a fixed URL.

In this case, we're using the `HistoryLocation`, which uses the `History` API to make sure the right thing happens when you hit the back/forward button. There's also a `HashLocation` which changes the URL `hash` to make history entries and listens to the `window.onhashchange` event to trigger navigation.

When you use react-router's `<Link>` component, you give it a `to` prop which is the name of a route, plus any `params` and `query` data the route needs. The `<a>` rendered by this component has an `onClick` handler which ultimately calls `router.transitionTo()` on the router instance with the props you gave the link, which looks like this:

  /**
   * Transitions to the URL specified in the arguments by pushing
   * a new URL onto the history stack.
   */
  transitionTo: function (to, params, query) {
    var path = this.makePath(to, params, query);

    if (pendingTransition) {
      // Replace so pending location does not stay in history.
      location.replace(path);
    } else {
      location.push(path);
    }
  },

For a regular link this ultimately calls `location.push()` on whichever Location type you're using, which handles the details of setting up history so navigating with the back and forward buttons will work, then calls back to `router.handleLocationChange()` to let the router know it can proceed with transitioning to the new URL path.

The router then calls its own `router.dispatch()` method with the new URL, which handles the details of determining which of the configured routes match the URL, then calls any transition hooks present for the matched routes. You can implement these transition hooks on any of your route handlers to take some action when a route is about to be navigated away from or navigated to, with the ability to abort the transition if things aren't to your liking.

If the transition wasn't aborted, the final step is to call the callback you gave to `Router.run()` with the top-level handler component and a state object with all the details of the URL and the matched routes. The top-level handler component is actually the `Router` instance itself, which handles rendering the top-most route handler which was matched.

The above process is re-run every time you navigate to a new URL on the client.

Example projects

- React Router Mega Demo

- Isomorphic Lab

Problem

Original source

Related problems

• react-router : run is not a function