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
components will cause the component to re-render when the location changes.
Very much inspired by (and copied from) react-router-redux.
I have decided to support react-router v3
as a minimum, so mobx-react-router
has a peer dependency of that version.
Upgrading a project from v2
to v3
should be fairly trivial, so I feel there is no reason to support v2
anymore.
Installation
For use with react-router v3 (most recent stable version).
npm install mobx-react-router --save
Usage
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';
import { Router, Route, browserHistory } from 'react-router';
import App from './App';
const routingStore = new RouterStore();
const stores = {
// Key can be whatever you want
routing: routingStore,
// ...other stores
};
const history = syncHistoryWithStore(browserHistory, routingStore);
ReactDOM.render(
<Provider {...stores}>
<Router history={history}>
<Route path='/' component={App} />
</Router>
</Provider>,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
@inject('routing')
@observer
export default class App extends Component {
render() {
const { location, push, goBack } = this.props.routing;
return (
<div>
<span>Current pathname: {location.pathname}</span>
<button onClick={() => push('/test')}>Change url</button>
<button onClick={() => goBack()}>Go Back</button>
</div>
);
}
}
API
RouterStore
const store = new RouterStore();
A router store instance has the following properties:
location
(observable) - history location objecthistory
- 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, usuallybrowserHistory
store
- An instance ofRouterStore
returns an enhanced history object with the following additional methods:
- listen(listener)
Listen to any changes in the store'slocation
observable
Returns an unsubscribe function which destroys the listener
const unsubscribeFromStore = history.listen(location => 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