microcosm-react-router
v0.0.1
Published
React Router bindings for Microcosm
Downloads
2
Readme
microcosm-react-router
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
Installation
npm install --save microcosm-react-router
npm install --save history
npm install --save react-router
Setup
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, '/')
repo.push(goBack)
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 })
API
Location Domain
Options
- history: an instance of the history package
- middleware: an array of functions to process raw location data (see middleware)
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))
]
Actions
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.
go(index)
Visit a specific index in the history stack.
goBack()
Return to the previous history stack entry.
goForward()
Go to the next history stack entry.