react-router-ex

The react-router-ex is a react-router-dom extension, it provides keep alive route after the route component mounted.

Install

pnpm add react-router-ex
# or
npm i react-router-ex
# or
yarn add react-router-ex

Documentation

• Router
• Switch
• Route
• useRouteMount

Router

Router component must be called before Switch or Route component.

Switch

Refer to the react-router-dom Switch component documentation.

special API:

| Property | Description | Type | Default | |----|----|----|----| | onChange | When route is match, it will execute. | (location) => void | - |

Route

Refer to the react-router-dom Route component documentation.

useRouteMount

import { useRouteMount } from 'react-router-ex';

const Root = () => {
  const {
    mounted,
    setMounted,
    getMount,
    doMount,
    doUnMount,
  } = useRouteMount();
  
  // do something
};

It is syntactic sugar for use Context (Router Context):

import { useContext } from 'react';
import { RouterContext } from 'react-router-ex';

const Root = () => {
  const {
    mounted,
    setMounted,
    getMount,
    doMount,
    doUnmount,
  } = useContext(RouterContext);

  // do something
};

API:

| Property | Description | Type | Default | |----|----|----|----| | mounted | Store the mount status of the route | Mounted({ [path: string ]: boolean }) | {} | | setMounted | update mounted | (Mounted) => void | - | | getMount | Get the mount status of a route | (path: string) => boolean | - | | doMount | Update the mount status to mounted | (path: string / string[]) => void | - | | doUnmount | Update the mount status to unmounted | (path: string / string[]) => void | - |

Usage

You can use it like using react-router-dom.

Basic usage:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Router, Switch, Route } from 'react-router-ex';

const Foo = () => {
  return (
    <div>foo</div>
  );
};

const Bar = () => {
  return (
    <div>bar</div>
  );
};

const Index = () => {
  return (
    <div>index</div>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <Router>
        <Switch>
          <Route path='/foo'>
            <Foo/>
          </Route>
          <Route path='/bar'>
            <Bar/>
          </Route>
          <Route path='/'>
            <Index/>
          </Route>
        </Switch>
      </Router>
    </BrowserRouter>
  );
};

export default App;