A server-friendly Location for React Router that can handle redirects & transitions.
Last updated 5 years ago by ericclemmons .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-router-server-location 
SYNC missed versions from official npm registry.

React Router ServerLocation

A React Router Location for universal apps.

What does ServerLocation Do?

  • Normalizes & exposes server-side request data so that React Router (and your components) can respond to all HTTP methods (e.g. GET, POST).

  • Redirects server-side requests when the router transitions to another URL.

  • Correctly supports complex, deep query strings (e.g. ?foo[bar][baz][bing]=...)

  • Allows the use of <Redirect> routes on the server as well as the client.

  • Works with both Express & Hapi.

Why ServiceLocation?

By default, React Router uses StaticLocation on the server which does not support transitions. Also, in my experience, the onAbort handler has not been a reliable means of handling this behavior.

Plus, ServerLocation allows your app components to take advantage of:

  • Redirect server-side requests via router.transitionTo.
  • The HTTP method via query._method (e.g. GET, POST).
  • POST params are available on the query like normal GET query params.
  • Access to HTTP headers via query._headers (which is useful for pivoting off of X-Requested-With)


$ npm install --save react-router-server-location


First, include ServerLocation as a dependency:

import ServerLocation from "react-router-server-location";

Next, create an instance using your server's request & response objects:

// Express
const location = new ServerLocation({ req, res });

// or Hapi
const location = new ServerLocation({ request, reply });

Finally, use React Router as normal:

Router.create({ location, routes }).run((Root) => {
  React.renderToString(<Root />);

Now, calls to router.transitionTo will redirect as expected on the server, and POST requests to your server-side React application can be supported!

If you'd like to handle redirects manually, you can instead pass a callback:

const location = new ServerLocation({ req }, function(path) {
  // Maybe save data to the session...
  req.session.redirected = true;

The res or reply objects aren't necessary since we're providing our own callback.




If you have questions or issues, please open an issue!

Current Tags

  • 2.0.0                                ...           latest (5 years ago)

5 Versions

  • 2.0.0                                ...           5 years ago
  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
  • qs 4.0.0
Dev Dependencies (13)
Dependents (0)

Copyright 2014 - 2017 © |