@superwf/mobx-react-router
TypeScript icon, indicating that this package has built-in type declarations

7.4.0 • Public • Published

mobx-react-router

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 🥳

Statements

Branches

Functions

Lines

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

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

Example

Complete code here: example

router.js

import { createBrowserHistory } from 'history'
import { RouterStore } from '@superwf/mobx-react-router'

const browserHistory = createBrowserHistory()
export const router = new RouterStore(browserHistory)

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router'
import App from './App'
import { router } from './router'

ReactDOM.render(
  <Router history={router.history}>
    <App />
  </Router>
  document.getElementById('root')
)

App.js

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 (
    <div>
      <span>Current pathname: {location.pathname}</span>
      <button onClick={() => push('/test')}>go to "/test"</button>
      <button onClick={back}>Go Back</button>
    </div>
  )
})

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.
import { 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

const browserHistory = createBrowserHistory()
// or hashHistory or memoryHistory
const 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.
{ action: history.action, location: history.location }
  • location (observable, readonly) - sync with history location
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.

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 #.
router.push('/abc#xxx')
router.hashValue // 'xxx'
  • pathValue extract path parameter to object type, need pathList work together.
router.appendPathList('/user/:name')
router.push('/user/xxx')
router.hashValue // 'xxx'

Instance methods

  • stopSyncWithHistory, stop sync with history any more, once stoped, can not start again.
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

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.

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

Package Sidebar

Install

npm i @superwf/mobx-react-router

Weekly Downloads

1,567

Version

7.4.0

License

MIT

Unpacked Size

190 kB

Total Files

12

Last publish

Collaborators

  • superwf