# unirouter
[![Version][version-svg]][package-url]
[![Build Status][travis-svg]][travis-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
A minimal and universal routing engine using [redux][redux],
[uniloc][uniloc], and the HTML5 history api. Inspired by
[@james_k_nelson][james-k-nelson]'s
[Simple Routing with Redux and React][redux-routing] and
[@agamennon][guilherme]'s [redux-tiny-router][redux-tiny-router].
It treats routing as simple state, stored in Redux and made available to
components via Redux's `connect()` wrapper. Manage your components however you
want using the route data generated by [uniloc][uniloc]. Use the included
`` component to generate urls from route names and options (often
referred to as "reverse lookup"), and trigger routing events when users click
your links.
## Installation
```sh
npm install --save unirouter redux
```
Redux is the only hard peer dependency, but if you want to use the ``
component you'll need to install React as well:
```sh
# Optional
npm install --save react
```
## Initialization
Before you can use unirouter, you'll need to include the provided reducer in
your combined redux reducer:
```js
import {combineReducers, createStore} from 'redux'
import {reducer as unirouterReducer} from 'unirouter'
import myReducer from '../path/to/my/reducer'
const reducer = combineReducers({
router: unirouterReducer,
myStuff: myReducer,
})
let store = createStore(reducer)
```
You'll also need to call the `init()` function to set up your initial routing
information and establish event hooks for the HTML5 history api:
```js
import {init as unirouterInit} from 'unirouter'
import getMyStore from '../path/to/my/store'
const store = getMyStore()
const routes = {
listContacts: 'GET /contacts',
postContact: 'POST /contacts',
editContact: 'GET /contacts/:id',
}
const aliases = {
'GET /': 'listContacts',
}
unirouterInit(store, routes, aliases)
```
This is best done in your init script on the front end, or in your render
middleware on the server.
## Usage
### Route State
If the user were to come in with the url `/contacts/13/edit?details=true`, the
following state would be available using whatever key you passed to the
`combineReducers()` call mentioned above:
```js
{
url: '/contacts/13/edit?details=true',
route: {name: 'editContact', options: {id: 13, details: true},
}
```
Use this in your top level component to determine which components should be
rendered based on the current route information.
### Link Component
To link directly to a route name, use the included `` React component:
```js
import {Link} from 'unirouter'
export class MyComponent extends Component {
render() {
return (