yameee-router
v2.0.1
Published
Yet another MobX router
Downloads
5
Readme
mobx-little-router
This package provides the core functionality of the MobX little router.
Getting Started
Import the install
function from package, along with your chosen history creator from history
package.
import { install } from 'yameee-router'
import { createMemoryHistory } from 'history'
const ROUTES = [{ path: ':whatever' }]
const router = install({
history: createMemoryHistory(),
routes: ROUTES
})
Then run router.start(...)
which takes in a callback when initialization finishes.
import { autorun } from 'mobx'
router.start(() => {
autorun(() => console.log(`path = ${router.store.location.pathname}`))
router.push('/a') // Prints "path = /a/"
router.push('/b') // Prints "path = /b/"
router.push('/c') // Prints "path = /c/"
router.push('/not/found') // Navigation aborts since path cannot be matched from config.
})
Install options
The install
function takes the following options:
history
- The history object created fromhistory
.getContext
- A function that returns a context object that is accessible from each route. This is useful for sharing MobX stores or other injectable objects.middleware
- Custom router middleware for your application.routes
- A list of initial route configuration of typeConfig[]
, wheretype Config = { path: string, // Static child routes. children?: Config[], // Dynamic child routes loadChildren?: () => Promise<Config[]>, // Guard functions that can block a route from activating or deactivating. canActivate?: (route: Route<*, *>) => boolean | Promise<void>, canDeactivate?: (route: Route<*, *>) => boolean | Promise<void>, // Called for each activation or query/param changes to the route. // Used for resolving effects. willResolve?: (route: Route<*, *>) => Promise<void>, onTransition?: (evt: TransitionEvent) => Promise<void> }
For more type information, check out the
routing/types.js
file.