# grey-app-react-router

> ### github https://github.com/xbgrey/grey-app-react-router

Latest version **0.1.9** (published 2019-02-17) · 0 weekly downloads

## Install

```sh
npm install grey-app-react-router
pnpm add grey-app-react-router
yarn add grey-app-react-router
bun add grey-app-react-router
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2019-02-17 |
| First published | 2019-01-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xbgrey |

## Links

- npm: https://www.npmjs.com/package/grey-app-react-router
- npm.io page: https://npm.io/package/grey-app-react-router

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^16.7.0
- [history](https://npm.io/package/history.md) ^4.7.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.7.0
- [@types/react](https://npm.io/package/@types/react.md) ^16.7.18
- [grey-message](https://npm.io/package/grey-message.md) ^1.0.2
- [@types/history](https://npm.io/package/@types/history.md) ^4.7.2
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.0.11
- [grey-group-function](https://npm.io/package/grey-group-function.md) ^0.1.3

## Recent versions

- 0.1.9 (latest) — 2019-02-17
- 0.1.8 — 2019-02-17
- 0.1.7 — 2019-01-15
- 0.1.6 — 2019-01-14
- 0.1.5 — 2019-01-14
- 0.1.4 — 2019-01-14
- 0.1.3 — 2019-01-14
- 0.1.2 — 2019-01-14
- 0.1.1 — 2019-01-12
- 0.1.0 — 2019-01-12

## README

## 一个可以缓存页面的路由

### github
https://github.com/xbgrey/grey-app-react-router

### 实例
#### app.tsx
```ts
import * as React from 'react';
import { Route, Link, Switch, Router } from 'grey-app-react-router';
import { Component1, Component2, Component3, Component4 } from './Components';
import './App.css';

Router.createHistory({
    basename: '/xxx/#'
})

class App extends React.Component {
    public render() {
        return (
            <div className="App">
                <Link to='/a?a=1'>to-a</Link>|
                <Link to='/b'>to-b</Link>|
                <Link to='/c/a'>to-c</Link>|
                <Link to='/d'>to-d</Link>

                <Switch default={0} >
                    <Route cache={true} path="/a" component={Component1} />
                    <Route cache={true} path="/b" component={Component2} />
                    <Route cache={false} path="/c" component={AppToA} />
                    <Route cache={false} path="/d" component={Component4} />
                </Switch>
            </div>
        );
    }
}

class AppToA extends React.Component {
    public render() {
        return (
            <div className="AppToA">
                <Link to='/c/ss1?a=1'>c-a</Link>|
                <Link to='/c/ss2'>c-b</Link>|
                <Link to='/c/ss3'>c-c</Link>|
                <Link to='/c/ss4'>c-d</Link>

                <Switch default={0} className="x" >
                    <Route cache={true} path="/c/ss1" component={Component1} />
                    <Route cache={true} path="/c/ss2" component={Component2} />
                    <Route cache={true} path="/c/ss3" component={Component3} />
                    <Route cache={true} path="/c/ss4" component={Component4} />
                </Switch>
            </div>
        );
    }
}

export default App;
```

#### Components.tsx
```ts
import * as React from 'react';
import { Router, PageBasis } from 'grey-app-react-router';

export class Component1 extends React.PureComponent<any> {
    public render() {
        return (
            <div>
                你的组件1{Router.history.location.pathname}<input/>
            </div>
        );
    }

    public componentWillUnmount(){
        console.log('Component1')
    }
}

export class Component2 extends PageBasis<any> {
    public render() {
        return (
            <div>
                你的组件2{Router.history.location.pathname}<input/>
            </div>
        );
    }

    public renewRender(){
        console.log('Component2-renewRender');
    }

    public componentWillUnmount(){
        console.log('Component2')
    }
}

export class Component3 extends React.PureComponent<any> {
    public render() {
        return (
            <div>
                你的组件3{Router.history.location.pathname}<input/>
            </div>
        );
    }

    public componentWillUnmount(){
        console.log('Component3')
    }
}

export class Component4 extends React.PureComponent<any> {
    public render() {
        return (
            <div>
                你的组件4{Router.history.location.pathname}<input/>
            </div>
        );
    }

    public componentWillUnmount(){
        console.log('Component4')
    }
}
```

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