mobx-router-react

Usage

1  import React from 'react'
2  import ReactDOM from 'react-dom'
3  import { createBrowserHistory } from 'history'
4  import { install, RouterProvider, Outlet } from 'mobx-little-router-react'
5  import { install } from 'mobx-little-router-react'
6
7  // Note that <Outlet/> is rendered at the App component level.
8  // This will allow any matched child route to also be rendered.
9  // If you need to block child rendering you can do that by not rendering
10  // the <Outlet/> element.
11  const App = () => (
12    <div>
13      <header>Acme Inc.</header>
14      <Outlet/>
15    </div>
16  )
17
18  const Home = () => (
19    <div>
20      <h1>Home</h1>
21    </div>
22  )
23
24  const About = () => (
25    <div>
26      <h1>About</h1>
27    </div>
28  )
29
30  install({
31    history: createBrowserHistory(),
32    routes: [
33      { path: '', component: Home },
34      { path: 'about', component: About }
35    ]
36  })
37
38  router.start(() => {
39    ReactDOM.render(
40      <RouterProvider router={router}>
41        <App />
42      </RouterProvider>,
43      document.getElementById('root')
44    )
45  })

Components

RouterProvider

Provides the router context

Link

Used to navigate

Outlet

Used to render routes at each depth.

Decorators

withRouter

injects router context into component props.

Configuration

component ReactComponent

A react component to render when the route is matched

outlet string

An optional named outlet to render this route into, ie. 'modal'

animate boolean, default: false

Do you wish to use built in animation features for this route. Specify a data-transition-ref attribute on the node you are animating otherwise the Component root node will be used for detecting the transitionend event.