A React Router Location for universal apps.
MIT License
ServerLocation
A React Router Location for universal apps.
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.
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:
router.transitionTo
.query._method
(e.g. GET
, POST
).POST
params are available on the query
like normal GET
query params.query._headers
X-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!