mobx-react-router

• mobx-react-router
  • Overview
  • Upgrade Note
  • Installation
  • Example
  • CDN
  • API
    • RouterStore constructor
    • Instance properties
    • Instance methods

Overview

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 🥳

Upgrade note

💡 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

Installation

1npm install --save @superwf/mobx-react-router

Example

Complete code here: example

router.js

1import { createBrowserHistory } from 'history'
2import { RouterStore } from '@superwf/mobx-react-router'
3
4const browserHistory = createBrowserHistory()
5export const router = new RouterStore(browserHistory)

index.js

1import React from 'react'
2import ReactDOM from 'react-dom'
3import { Router } from 'react-router'
4import App from './App'
5import { router } from './router'
6
7ReactDOM.render(
8  <Router history={router.history}>
9    <App />
10  </Router>
11  document.getElementById('root')
12)

App.js

1import React, { Component } from 'react'
2import { observer } from 'mobx-react-lite'
3import { router } from './router'
4
5export const App = observer(() => {
6  const { location, push, back } = router
7  return (
8    <div>
9      <span>Current pathname: {location.pathname}</span>
10      <button onClick={() => push('/test')}>go to "/test"</button>
11      <button onClick={back}>Go Back</button>
12    </div>
13  )
14})

CDN

• Global var mode mode. Global variable name: window.MobxReactRouter

<script type="javascript" src="https://unpkg.com/@superwf/mobx-react-router@latest/dist/mobx-react-router.min.js"></script>

• Es module mode.

1import { RouterStore } from 'https://unpkg.com/@superwf/mobx-react-router/module/index.js'

API

RouterStore constructor

param: history - A variant of a history object, usually browserHistory

1const browserHistory = createBrowserHistory()
2// or hashHistory or memoryHistory
3const router = new RouterStore(browserHistory)

Instance properties

A RouterStore instance has the following properties:

• history - raw history API object
• state (observable) - sync with history state, type as below.

1{ action: history.action, location: history.location }

• location (observable, readonly) - sync with history location

1router.push('/test1')
2router.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.

1router.push('/abc?a=1&b=2')
2router.query // { a: '1', b: '2' }
3router.push('/abc?id=1&id=2')
4router.query // { id: ['1', '2'] }

• hashValue hash string without #.

1router.push('/abc#xxx')
2router.hashValue // 'xxx'

• pathValue extract path parameter to object type, need pathList work together.

1router.appendPathList('/user/:name')
2router.push('/user/xxx')
3router.hashValue // 'xxx'

Instance methods

• stopSyncWithHistory, stop sync with history any more, once stoped, can not start again.

1router.push('/test1')
2router.location.pathname // '/test1'
3router.stopSyncWithHistory()
4router.push('/test2') // not sync any more
5router.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

1const stopListen = router.subscribe(({ location }) => console.log(location.pathname))
2router.push('/test1') // output '/test1'
3stopListen()
4router.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.

1router.appendPathList('/user/:name')
2router.push('/user/rock') // match "/user/:name"
3router.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