@nuento/mobx-react-router

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