React-router-mobx NPM

react-router-mobx

When React Router meets MobX: observable router and location.

Features

location are observable
Built-in query observable object to location
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-router Router
Pass a RouterStore instance and react-router Router component to Router 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' } or routerStore.location.search = '?say=world'

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 update location state
component (ReactComponent): Defining the react router component, e.g. BrowserRouter, MemoryRouter, NativeRouter, etc. Defaults to react-router Router 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 contain parse(object) and stringify(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.