npm package: @nuento/mobx-react-router
Description: Simple react router with mobx state management
Author: nuento
Latest version: 1.2.7

# mobx-react-router

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

A simple react router using mobx as state management

### RouterStore

import `RouterStore` and add it the provider from `mobx-react`
```JSX
import { Provider } from 'mobx-react';
import { RouterStore } from '@nuento/mobx-react-router';
import App from './App';

render(
  <Provider routerStore={new RouterStore()}>
    <App/>
  </Provider>,
  document.getElementById('root'),
);
```

### Route
```JSX
import { Route } from '@nuento/mobx-react-router';

<Route exact path="/" component={HomePage}/>
<Route path="/about" component={AboutPage}/>
<Route state-modal="signin" render={({match}) => {
  return <div>SignInModal</div>
}}/>
```
| Prop        | Type               | Default Value | Description                                        |
|-------------|--------------------|---------------|----------------------------------------------------|
| `path`      | `string`           | `null`        | describe a ExpressJS like path to match against.   |
| `exact`     | `bool`             | `false`       | require path to be an exact match                  |
| `state-*`   | `string`, `number` | `null`        | match against specific key and value in the state. |
| `render`    | `func`             | `null`        | pass a function to be rendered on match            |
| `component` | `element`          | `null`        | pass a react component to be rendered on match.    |

### Link
```JSX
import { Link } from '@nuento/mobx-react-router';

<Link to="/">Home</Link>
<Link replace to="/about">About</Link>
<Link tag="button" state-modal="signin">Sign In</Link>
```
| Prop      | Type               | Default Value | Description                                        |
|-----------|--------------------|---------------|----------------------------------------------------|
| `to`      | `string`           | `null`        | describe a ExpressJS like path to match against.   |
| `state-*` | `string`, `number` | `null`        | match against specific key and value in the state. |
| `tag`     | `element`          | `a`           | pass an element to act as the link component       |
| `replace` | `bool`             | `false`       | replace history instead of pushing                 |

### Switch
Only the first route match in the switch will be rendered, if nothing is matched the last element will be rendered.
```JSX
import { Switch, Route } from '@nuento/mobx-react-router';

<Switch>
    <Route exact path="/" component={HomePage}/>
    <Route path="/about" component={AboutPage}/>
    <Route state-modal="signin" render={({match}) => {
      return <div>SignInModal</div>
    }}/>
</Switch>
```
| Prop      | Type   | Default Value | Description                                                          |
|-----------|--------|---------------|----------------------------------------------------------------------|
| `defined` | `bool` | `false`       | set to true if you you dont want it to render last route if no match |


[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/@nuento/mobx-react-router.png?style=flat-square
[npm]: https://www.npmjs.org/package/@nuento/mobx-react-router

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo