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.

Authors

• Eric Clemmons (@ericclemmons)

License

Collaboration

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