mobx-react-router

Keep your MobX state in sync with react-router via a

RouterStore

Router location state is observable, so any references to it in

MobX

Very much inspired by (and copied from) react-router-redux.

• Installation
• Usage
• API
  • RouterStore
  • syncHistoryWithStore

This branch (master) is for use with react-router v4.

If you're looking for the bindings for use with react-router

v3

Installation

npm install --save mobx-react-router

And if you haven't installed all the peer dependencies, you should probably do that now:

npm install --save mobx mobx-react react-router

Usage

index.js

const browserHistory = createBrowserHistory(); const routingStore = new RouterStore();

const stores = { // Key can be whatever you want routing: routingStore, // ...other stores };

const history = syncHistoryWithStore(browserHistory, routingStore);

ReactDOM.render( , document.getElementById('root') ); ```

App.js

@inject('routing') @observer export default class App extends Component { render() { const { location, push, goBack } = this.props.routing;

return (
  

    Current pathname: {location.pathname}
     push('/test')}>Change url
     goBack()}>Go Back
  
);

} } ```

Typescript

If you are using typescript - the built in typings for this project depend on

@types/history

Troubleshooting

Routes not updating correctly when URL changes

There is a known issue with React Router 4 and MobX (and Redux) where "blocker" components like those created by

@observer

@connect

There is a React Router 4 documentation page for information on this issue:

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md

To fix problems like this, try wrapping components which are being "blocked" with React Router's

withRouter

Refer to the link above for more information on this solution, and some alternatives.

API

RouterStore

const store = new RouterStore();

A router store instance has the following properties:

• location

  (observable) - history location object

• history

  - raw history API object

And the following history methods:

• push(path)
• replace(path)
• go(n)
• goBack()
• goForward()

syncHistoryWithStore(history, store)

• history

  - A variant of a history object, usually

  browserHistory

• store

  - An instance of

  RouterStore

returns an enhanced history object with the following additional methods:

• subscribe(listener)
  Subscribes to any changes in the store's

  location

  observable
  Returns an unsubscribe function which destroys the listener ```js const unsubscribeFromStore = history.subscribe((location, action) => console.log(location.pathname));

history.push('/test1'); unsubscribeFromStore(); history.push('/test2');

// Logs // 'test1' ```

• unsubscribe()
  Un-syncs the store from the history. The store will no longer update when the history changes

history.unsubscribe();
// Store no longer updates