https://github.com/ericclemmons/react-router-server-location
A React Router Location for universal apps.
https://github.com/ericclemmons/react-router-server-location
Last synced: about 1 month ago
JSON representation
A React Router Location for universal apps.
- Host: GitHub
- URL: https://github.com/ericclemmons/react-router-server-location
- Owner: ericclemmons
- License: mit
- Created: 2015-08-09T02:52:00.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-08-24T04:59:38.000Z (over 9 years ago)
- Last Synced: 2025-03-10T19:03:21.149Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 195 KB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Router `ServerLocation` 
> A [React Router][1] Location for universal apps.
[](https://github.com/ericclemmons/react-router-server-location/issues)
[](https://travis-ci.org/ericclemmons/react-router-server-location)
[](https://david-dm.org/ericclemmons/react-router-server-location#info=dependencies)
- - -
### 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 `` routes on the server as well as the client.
- Works with both [Express][3] & [Hapi][4].
### Why `ServiceLocation`?
By default, [React Router][1] uses [StaticLocation](http://rackt.github.io/react-router/#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
```shell
$ npm install --save react-router-server-location
```
### Usage
First, include `ServerLocation` as a dependency:
```js
import ServerLocation from "react-router-server-location";
```
Next, create an instance using your server's request & response objects:
```js
// Express
const location = new ServerLocation({ req, res });
// or Hapi
const location = new ServerLocation({ request, reply });
```
Finally, use [React Router][1] as normal:
```js
Router.create({ location, routes }).run((Root) => {
React.renderToString();
});
```
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:
```js
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](mailto:[email protected]>) ([@ericclemmons][twitter])
## [License][license]
## Collaboration
If you have questions or issues, please [open an issue][issue]!
[1]: http://rackt.github.io/react-router/
[2]: https://github.com/ericclemmons/react-resolver
[3]: http://expressjs.com/
[4]: http://hapijs.com/
[issue]: https://github.com/ericclemmons/react-router-server-location/issues/new
[license]: https://github.com/ericclemmons/react-router-server-location/blob/master/LICENSE
[twitter]: https://twitter.com/ericclemmons/