mobx-react-router

A simple react router using mobx as state management

RouterStore

import RouterStore and add it the provider from mobx-react

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

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

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.

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 |