Keep your MobX state in sync with react-router
npm install @superwf/mobx-react-router- mobx-react-router
- Overview
- Upgrade Note
- Installation
- Example
- CDN
- API
- RouterStore constructor
- Instance properties
- Instance methods
Keep your MobX state in sync with react-router via a RouterStore.
Router location state is observable, so any references to it in MobX
components will cause the component to re-render when the location changes.
This repo is forked from alisd23/mobx-react-router.
Totally rewrite with typescript and has type definition together.
Tested š„³
š” Note 2021-8-16 update to v7 for compatible with history v5, mobx v6, react-router v5 and path-to-regexp v6
Since History upgrade to V5, its api changed a lot.
So please READ API part again even you have used mobx-react-router.
š” Note if you need to work woth old version react-router and history, install v6 by npm install --save @superwf/mobx-react-router@6.0.0
``sh`
npm install --save @superwf/mobx-react-router
Complete code here: example
router.js
`javascript
import { createBrowserHistory } from 'history'
import { RouterStore } from '@superwf/mobx-react-router'
const browserHistory = createBrowserHistory()
export const router = new RouterStore(browserHistory)
`
index.js
`javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router'
import App from './App'
import { router } from './router'
ReactDOM.render(
document.getElementById('root')
)
`
App.js
`javascript
import React, { Component } from 'react'
import { observer } from 'mobx-react-lite'
import { router } from './router'
export const App = observer(() => {
const { location, push, back } = router
return (
CDN
- Global var mode mode. Global variable name:
window.MobxReactRouter- Es module mode.
`javascript
import { RouterStore } from 'https://unpkg.com/@superwf/mobx-react-router/module/index.js'
`API
$3
param:
history - A variant of a history object, usually browserHistory`javascript
const browserHistory = createBrowserHistory()
// or hashHistory or memoryHistory
const router = new RouterStore(browserHistory)
`$3
A RouterStore instance has the following properties:
- history - raw history API object
-
state (observable) - sync with history state, type as below.`javascript
{ action: history.action, location: history.location }
`- location (observable, readonly) - sync with history location
`javascript
router.push('/test1')
router.location.pathname // '/test1'
`- history the history instance from constructor. Use it as your will, do not update it.
- pathList string[], observable, used to match
pathValue. Do not use it directly unless you absolutely know your purpose.- query url search object format.
`javascript
router.push('/abc?a=1&b=2')
router.query // { a: '1', b: '2' }
router.push('/abc?id=1&id=2')
router.query // { id: ['1', '2'] }
`- hashValue hash string without
#.`javascript
router.push('/abc#xxx')
router.hashValue // 'xxx'
`- pathValue extract path parameter to object type, need
pathList work together.`javascript
router.appendPathList('/user/:name')
router.push('/user/xxx')
router.hashValue // 'xxx'
`$3
- stopSyncWithHistory, stop sync with history any more, once stoped, can not start again.
`javascript
router.push('/test1')
router.location.pathname // '/test1'
router.stopSyncWithHistory()
router.push('/test2') // not sync any more
router.location.pathname // '/test1'
`- subscribe(listener) and unsubscribe()
Subscribes to any changes in the store's
location observable,
and run the listener at once with current history state.
Returns an unsubscribe function which destroys the listener`javascript
const stopListen = router.subscribe(({ location }) => console.log(location.pathname))
router.push('/test1') // output '/test1'
stopListen()
router.push('/test2') // no output any more
`- appendPathList, prependPathList
Append or prepend new paths to
pathList property,š” Note path in pathList order is important, first matched path will return the
pathValue result.Use
prependPathList for some path which has high priority.`javascript
router.appendPathList('/user/:name')
router.push('/user/rock') // match "/user/:name"
router.pathValue // now get a path param: { name: 'rock' }
``The following methods bind to the history instance, for more detail read here: history methods:
- push
- replace
- go
- back
- forward
- subscribe