@nuento/mobx-react-router NPM

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>