React-router-server-location NPM

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)

Installation

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

Usage

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;
  res.redirect(path);
});

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