boring-router

Boring Router

A light-weight, type-safe, yet reactive router service using MobX.

Installation

# peer dependencies
yarn add history react mobx mobx-react

# boring router package
yarn add boring-router

Usage

import {Route, Router} from 'boring-router';
import {observer} from 'mobx-react';
import {createBrowserHistory} from 'history';
import React, {Component} from 'react';

const history = createBrowserHistory();

const router = Router.create(
  {
    account: true,
    about: true,
    notFound: {
      $match: '**',
    },
  },
  history,
);

@observer
class App extends Component {
  render() {
    return (
      <>
        <Route match={router.account}>Account page</Route>
        <Route match={router.about}>About page</Route>
        <Route match={router.notFound}>Not found</Route>
      </>
    );
  }
}

Schema

Boring Router defines routes via a tree-structure schema:

type RouteSchemaDict = Dict<RouteSchema | boolean>;

interface RouteSchema {
  $match?: string | RegExp;
  $query?: Dict<boolean>;
  $children?: Dict<RouteSchema | boolean>;
}

const schema: RouteSchemaDict = {};

Option $match with value '*' and '**' will be converted to regular expressions /[^/]+/ and /.+/ respectively.

Route match

The value of expression like router.account in the usage example above is a RouteMatch, and it has the following reactive properties and methods:

interface RouteMatch<TParamDict> {
  $matched: boolean;
  $exact: boolean;
  $params: TParamDict;

  $path(params?: Partial<TParamDict>, preserveQuery?: boolean): string;
}

Examples

Example list

• Basic

  Basic usage.

  <Route match={router.account}>
    <p>Account page</p>
  </Route>
  

• Exact

  Match exact path.

  <Route match={router.account} exact>
    <p>Exact account page</p>
  </Route>
  

• Fragment

  Boring Router's version of /account/:id alike parameter.

  <Link to={router.account.id} params={{id: '123'}}>
    Account 123
  </Link>
  

  <Route match={router.account.id}>
    <p>Account {router.account.id.$params.id} details page</p>
  </Route>
  

• Query

  Handle query string parameter.

  <Link to={router.account} params={{id: '123'}}>
    Account 123
  </Link>
  

  <Route match={router.account}>
    <p>Account {router.account.$params.id} details page</p>
  </Route>
  

• Route Component

  Use <Route /> with a route component.

  <Route match={router.account} component={AccountPage} />
  

  <Route match={match.details}>
    <p>Account {match.$params.id} details page</p>
  </Route>
  

Run an example

yarn install
yarn build

yarn global add parcel

parcel examples/[name]/index.html

License

MIT License.