Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-router-server-location

2.0.0 • Public • Published

React Router ServerLocation https://img.shields.io/npm/v/react-router-server-location.svg

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

License

Collaboration

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

Install

npm i react-router-server-location

DownloadsWeekly Downloads

10

Version

2.0.0

License

MIT

Last publish

Collaborators

  • avatar