# react-router-ex

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

Latest version **1.0.1** (published 2021-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-ex
pnpm add react-router-ex
yarn add react-router-ex
bun add react-router-ex
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-10-18 |
| First published | 2021-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 143.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Haolin |
| Maintainers | aircan |
| Keywords | react-router, react-router-dom, react-router-ex, react-router-extension, keep-alive, keep-alive-router |

## Links

- npm: https://www.npmjs.com/package/react-router-ex
- Repository: https://github.com/HaolinHom/react-router-ex
- Homepage: https://github.com/HaolinHom/react-router-ex#readme
- Issues: https://github.com/HaolinHom/react-router-ex/issues
- npm.io page: https://npm.io/package/react-router-ex

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-10-18
- 1.0.0 — 2021-08-14

## README

# react-router-ex

The react-router-ex is a [react-router-dom](https://www.npmjs.com/package/react-router-dom) extension, 
it provides keep alive route after the route component mounted.

## Install

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

## Documentation

- [Router](#Router)
- [Switch](#Switch)
- [Route](#Route)
- [useRouteMount](#useRouteMount)

### Router

`Router` component must be called before `Switch` or `Route` component.

### Switch

Refer to the [react-router-dom Switch component documentation](https://reactrouter.com/web/api/Switch).

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](https://reactrouter.com/web/api/Route).

### useRouteMount

```javascript
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):

```javascript
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:

```javascript
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;
```

---
_Source: https://npm.io/package/react-router-ex · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._