React Router bindings for Microcosm
Last updated 5 years ago .
· Original npm · Tarball · package.json
$ cnpm install microcosm-react-router 
SYNC missed versions from official npm registry.


Sync up react-router with Microcosm. This is experimental, and heavily inspired by react-router-redux

  1. Installation
  2. Setup
  3. Manipulating History
  4. Routing Middleware (add query string parsing)
  5. API


npm install --save microcosm-react-router
npm install --save history
npm install --save react-router


microcosm-react-router is implimented through Domains:

import createBrowserHistory from 'history/createBrowserHistory'
import Microcosm from 'microcosm'
import { Location } from 'microcosm-react-router'

class Repo extends Microcosm {
  setup({ history }) {
    this.addDomain('location', Location, { history })

let history = createBrowserHistory()
let repo = new Repo({ history })

// Then pass history to React Router

Manipulating history

Control history by pushing actions:

import { push, replace, go, goBack, goForward } from 'microcosm-react-router'

repo.push(push, '/')


Checkout the history package for API documentation.

Routing Middleware

Add additional data processing to location data via middleware passed when adding the Location domain:

import Microcosm, { set } from 'microcosm'
import Location from 'microcosm-react-router'
import createBrowserHistory from 'history/createBrowserHistory'
import qs from 'querystring'

let repo = new Microcosm()
let history = createBrowserHistory()
let middleware = [
  location => set(location, 'query', qs.parse(location.search))

repo.addDomain('location', Location, { history, middleware })


Location Domain


  • history: an instance of the history package
  • middleware: an array of functions to process raw location data (see middleware)


Middleware allow extra processing of location data:

import { set } from 'microcosm'
import { parse } from 'query-string'

let middleware = [
  // Add parsed query data 
  location => set(location, 'query', parse(location.search))


These actions directly map to methods in the history package, which is the underlying kernel for react-router.

push(path, state)

Push a new entry in the history stack.

replace(path, state)

Replace the current entry in the history stack.


Visit a specific index in the history stack.


Return to the previous history stack entry.


Go to the next history stack entry.

Current Tags

  • 0.0.1                                ...           latest (5 years ago)

1 Versions

  • 0.0.1                                ...           5 years ago
Maintainers (2)
Dependencies (0)
Dev Dependencies (10)

Copyright © npmmirror.com | 浙ICP备15033595号-63 |