How to use boring-router - 10 common examples

let trackedActiveIndex = getActiveHistoryEntryIndex(tracked);

    let minLength = Math.min(expectedEntries.length, trackedEntries.length);

    let firstMismatchedIndex = 0;

    for (
      firstMismatchedIndex;
      firstMismatchedIndex < minLength;
      firstMismatchedIndex++
    ) {
      let expectedEntry = expectedEntries[firstMismatchedIndex];
      let trackedEntry = trackedEntries[firstMismatchedIndex];

      if (!isHistoryEntryEqual(expectedEntry, trackedEntry)) {
        break;
      }
    }

    if (
      firstMismatchedIndex > lastExpectedIndex &&
      (lastExpectedIndex === lastTrackedIndex || lastExpectedIndex === 0)
    ) {
      // 1. Exactly identical.
      // 2. Not exactly identical but there's not much that can be done:
      //    ```
      //    expected  a
      //    tracked   a -> b
      //                   ^ mismatch
      //    ```
      //    In this case we cannot remove the extra entries.

$match: '',
  },
  account: true,
  profile: {
    $exact: true,
    $children: {
      details: true,
    },
  },
  about: {
    $query: {
      source: true,
    },
  },
  notFound: {
    $match: RouteMatch.rest,
  },
});

route.account.$beforeEnter(() => {
  route.about.$push({source: 'reaction'});
});

route.profile.$beforeEnter(match => {
  console.info('before enter profile');

  if (match.$exact) {
    match.details.$push();
  }
});

route.profile.$afterEnter(() => {

private restoreActive(): void {
    let expectedActiveIndex = getActiveHistoryEntryIndex(this.snapshot);
    let trackedActiveIndex = getActiveHistoryEntryIndex(this.tracked);

    if (trackedActiveIndex < expectedActiveIndex) {
      history.forward();
    } else if (trackedActiveIndex > expectedActiveIndex) {
      history.back();
    } else {
      this.completeRestoration();
    }
  }

private restoreEntries(): void {
    let expected = this.snapshot;
    let tracked = this.tracked;

    let {entries: expectedEntries} = expected;
    let {entries: trackedEntries} = tracked;

    let lastExpectedIndex = expectedEntries.length - 1;
    let lastTrackedIndex = trackedEntries.length - 1;

    let trackedActiveIndex = getActiveHistoryEntryIndex(tracked);

    let minLength = Math.min(expectedEntries.length, trackedEntries.length);

    let firstMismatchedIndex = 0;

    for (
      firstMismatchedIndex;
      firstMismatchedIndex < minLength;
      firstMismatchedIndex++
    ) {
      let expectedEntry = expectedEntries[firstMismatchedIndex];
      let trackedEntry = trackedEntries[firstMismatchedIndex];

      if (!isHistoryEntryEqual(expectedEntry, trackedEntry)) {
        break;
      }

private pushEntry({
    id,
    ref,
    data,
  }: BrowserHistoryEntry): BrowserHistorySnapshot {
    let tracked = this.tracked;

    let {entries} = tracked;

    let activeIndex = getActiveHistoryEntryIndex(tracked);

    let snapshot: BrowserHistorySnapshot = {
      entries: [...entries.slice(0, activeIndex + 1), {id, ref, data}],
      active: id,
    };

    this.tracked = snapshot;

    let href = this.getHRefByRef(ref);

    try {
      history.pushState({id, data}, '', href);
    } catch (error) {
      history.pushState({id}, '', href);
    }

import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';

import {
  BrowserHistory,
  Link,
  Route,
  RouteComponentProps,
} from '../../bld/library';

const history = new BrowserHistory();

const router = new Router(history);

const route = router.$route({
  default: {
    $match: '',
  },
  account: {
    $children: {
      signUp: true,
      resetPassword: true,
      settings: true,
    },
  },
});

export type RouteType = typeof route;

import {RouteMatch, Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';

import {BrowserHistory, Link, Route} from '../../bld/library';

const history = new BrowserHistory();

const router = new Router(history);

const route = router.$route({
  default: {
    $match: '',
  },
  account: {
    $exact: true,
    $children: {
      id: {
        $match: RouteMatch.segment,
      },
    },
  },
});

@observer

import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';

import {BrowserHistory, Link, Route} from '../../bld/library';

const history = new BrowserHistory();

const router = new Router(history);

const primaryRoute = router.$route({
  default: {
    $match: '',
  },
  account: {
    $exact: true,
    $query: {
      id: true,
    },
    $children: {
      details: true,
    },
  },
});

import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';

import {BrowserHistory, NavLink} from '../../bld/library';

const history = new BrowserHistory();

const router = new Router(history);

const route = router.$route({
  default: {
    $match: '',
  },
  account: {
    $exact: true,
    $children: {
      settings: true,
    },
  },
  about: true,
});

@observer
export class App extends Component {

import {Router} from 'boring-router';
import {observer} from 'mobx-react';
import React, {Component, ReactNode} from 'react';
import ReactDOM from 'react-dom';

import {BrowserHistory, Link, Route} from '../../bld/library';

const history = new BrowserHistory();

const router = new Router(history);

const route = router.$route({
  default: {
    $match: '',
  },
  account: {
    $exact: true,
    $children: {
      details: true,
    },
  },
});

@observer
export class App extends Component {
  render(): ReactNode {