Sync up react-router with Microcosm. This is experimental, and heavily
inspired by react-router-redux
- Installation
- Setup
- Manipulating History
- Routing Middleware (add query string parsing)
- API
npm install --save microcosm-react-router
npm install --save history
microcosm-react-router is implemented through a Location
domain:
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
Control history by pushing actions:
import { push, replace, go, goBack, goForward } from 'microcosm-react-router'
repo.push(push, '/')
repo.push(goBack)
Checkout the history
package for API documentation.
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 })
- 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 a new entry in the history stack.
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.