Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
mobx-react-router
Advanced tools
Readme
Use @ibm/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.
This branch (master) is for use with react-router v6. Please, check the branch v5 for react-router v5.
npm install --save @ibm/mobx-react-router
/!\ npm install --save mobx-react-router
is now deprecated, use npm install --save @ibm/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
Although, mobx v6 deprecated decorators, this library still requires to enable them.
Below is an example of configuration using vite.js
:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
target: 'es2015',
plugins: [
react({
babel: {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
],
},
}),
],
});
For more details, please consult the documentation of mobx v6 on decorators.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createBrowserHistory } from 'history';
import { Provider } from 'mobx-react';
import { RouterStore, syncHistoryWithStore } from '@ibm/mobx-react-router';
import { Router } from 'react-router';
import App from './App';
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(
<Provider {...stores}>
<Router location={routingStore.location} navigator={history}>
<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, back } = this.props.routing;
return (
<div>
<span>Current pathname: {location.pathname}</span>
<button onClick={() => push('/test')}>Change url</button>
<button onClick={() => back()}>Go Back</button>
</div>
);
}
}
Check our live example.
You can replace history/createBrowserHistory
with history/createHashHistory
in the example above to use hash routes instead of HTML5 routing.
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
(and @connect
in Redux) block react router updates from propagating down the
component tree.
To fix problems like this, try wrapping components which are being "blocked" with React Router's withRouter
higher
order component should help, depending on the case.
const store = new RouterStore();
A router store instance has the following properties:
location
(observable) - history location objecthistory
- raw history API objectAnd the following history methods:
history
- A variant of a history object, usually browserHistory
store
- An instance of RouterStore
returns an enhanced history object with the following additional methods:
location
observableconst unsubscribeFromStore = history.subscribe((location, action) => console.log(location.pathname));
history.push('/test1');
unsubscribeFromStore();
history.push('/test2');
// Logs
// 'test1'
history.unsubscribe();
// Store no longer updates
FAQs
Keep your MobX state in sync with react-router
The npm package mobx-react-router receives a total of 8,093 weekly downloads. As such, mobx-react-router popularity was classified as popular.
We found that mobx-react-router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.