react-router-mobx
v1.2.2
Published
when react-router meets mobx: observable router and location
Downloads
55
Maintainers
Readme
react-router-mobx
When React Router meets MobX: observable router and location.
Table of Contents
Features
location
are observable- Built-in
query
observable object tolocation
- Super easy to push/update new URL, pathname, hash, search or query
WTF
If you wanna push url from http://aweso.me/search?q=hello&page=4
to http://aweso.me/search?q=hello&page=5
, you may need:
Before
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { observer } from 'mobx-react';
import qs from 'qs';
import myStore from './stores/myStore';
@withRouter
@observer
export default class MyApp extends Component {
static propTypes = {
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
goToNextPage = (ev) => {
ev.preventDefault();
const { location, history } = this.props;
const query = qs.parse(location.search ? location.search.slice(1) : '');
history.push({
...location,
search:
'?' +
qs.stringify({
...query,
page: 1 + query.page,
}),
});
};
render() {
const { location } = this.props;
const { page } = qs.parse(location.search ? location.search.slice(1) : '');
return (
<div>
<div>{myStore.someContent}</div>
<p>Page: {page || 1}</p>
<button onClick={this.goToNextPage}>Next</button>
</div>
);
}
}
After
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import myStore from './stores/myStore';
import routerStore from './stores/routerStore';
@observer
export default class MyApp extends Component {
goToNextPage = (ev) => {
ev.preventDefault();
const { location } = routerStore;
location.query = {
...location.query,
page: 1 + location.query.page,
};
};
render() {
const { page } = routerStore.location.query;
return (
<div>
<div>{myStore.someContent}</div>
<p>Page: {page || 1}</p>
<button onClick={this.goToNextPage}>Next</button>
</div>
);
}
}
Installation
yarn add react-router-mobx
You should install all the peer dependencies if you haven't installed them:
yarn add react mobx mobx-react react-router-dom
If you are using React Native, please install react-router-native
instead of react-router-dom
.
Usage
- Use react-router-mobx
Router
instead of react-routerRouter
- Pass a
RouterStore
instance and react-routerRouter
component toRouter
component:
import React, { Component } from 'react';
import { Router, RouterStore } from 'react-router-mobx';
import { BrowserRouter, Route } from 'react-router-dom';
const routerStore = new RouterStore();
export default class App extends Component {
render() {
return (
<Router component={BrowserRouter} routerStore={routerStore}>
<Route {...someRouteConfigs} />
</Router>
);
}
}
API Reference
RouterStore
The MobX store class that contains some router properties and methods.
RouterStore#location
A little bits like react-router location
object which contains key
, pathname
, search
, hash
, state
. But there are several differences:
- Prividing
query
object, just like react-router v3 or below - All properties are observable and mutable
- Could push URL by passing new location or properties, just like
window.location
- Push a new URL:
routerStore.location = '/foo?say=hello'
- Push a new
pathname
, i.e. from/foo?say=hello
to/bar?say=hello
:routerStore.location.pathname = '/bar'
- Push a new
search
, i.e. from/foo?say=hello
to/foo?say=world
:routerStore.location.query = { say: 'world' }
orrouterStore.location.search = '?say=world'
- Push a new URL:
RouterStore#history
Just like react-router history
object, except for history.listen
:
history.listen((location, prevLocation, action) => {
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
console.log(`The previous URL is ${prevLocation.pathname}${prevLocation.search}${prevLocation.hash}`);
});
RouterStore#push(loc, state)
Like react-router history.push(loc, state)
, but the loc
param supports to be an object that contains a query
object.
RouterStore#replace(loc, state)
Like react-router history.replace(loc, state)
, but the loc
param supports to be an object that contains a query
object.
Router
The low-level api router component instead of react-router Router
component.
Props
- routerStore (RouterStore): Defining a
RouterStore
instance to store or updatelocation
state - component (ReactComponent): Defining the react router component, e.g.
BrowserRouter
,MemoryRouter
,NativeRouter
, etc. Defaults to react-routerRouter
component - history (Object): You can also define a custom history object, just like react-router
Router
component - All properties in react-router
Router
are supported
setQueryString(queryString)
Setting a custom queryString
library.
Arguments
- queryString (Object): Custom
queryString
library, which should containparse(object)
andstringify(object)
methods
Example
import { setQueryString } from 'react-router-mobx';
import { parse, stringify } from 'qs';
setQueryString({ parse, stringify });
Versioning
This library follows Semantic Versioning.
This library is considered to be General Availability (GA). This means it is stable; the code surface will not change in backwards-incompatible ways unless absolutely necessary (e.g. because of critical security issues) or with an extensive deprecation period. Issues and requests against GA libraries are addressed with the highest priority.
License
MIT