mobx-little-router

Implementation of an universal router that uses MobX to manage state.

Usage no npm install needed!

<script type="module">
  import mobxLittleRouter from 'https://cdn.skypack.dev/mobx-little-router';
</script>

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 'mobx-little-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 from history.

  • 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 type Config[], where

    type 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.

Documentation