A React Router Location for universal apps.
-
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.
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 thequery
like normalGET
query params.- Access to HTTP headers via
query._headers
(which is useful for pivoting off ofX-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;
res.redirect(path);
});
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!