rrs
react-router-server-location
npm i react-router-server-location
rrs

react-router-server-location

A React Router Location for universal apps.

by Eric Clemmons

2.0.0 (see all)License:MITTypeScript:Not Found
npm i react-router-server-location
Readme

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!

Downloads/wk

1

GitHub Stars

12

LAST COMMIT

7yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
2.0.0
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate