Skip to content

A react-router-dom extension, provide keep alive route function.

License

Notifications You must be signed in to change notification settings

HaolinHom/react-router-ex

Repository files navigation

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

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;