# @saber2pr/router

> > react-router-dom by hooks api.

Latest version **0.1.8** (published 2019-08-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install @saber2pr/router
pnpm add @saber2pr/router
yarn add @saber2pr/router
bun add @saber2pr/router
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2019-08-01 |
| First published | 2019-05-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | saber2pr |
| Maintainers | saber2pr |
| Keywords | router, typescript, react, hash-router, history-router |

## Links

- npm: https://www.npmjs.com/package/@saber2pr/router
- Repository: https://github.com/Saber2pr/router
- npm.io page: https://npm.io/package/@saber2pr/router

## Dependencies (1)

- [@saber2pr/schedular](https://npm.io/package/@saber2pr/schedular.md) 0.0.8

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.8 (latest) — 2019-08-01
- 0.1.7 — 2019-07-23
- 0.1.6 — 2019-06-13
- 0.1.5 — 2019-06-13
- 0.1.4 — 2019-06-10
- 0.1.3 — 2019-06-06
- 0.1.2 — 2019-06-06
- 0.1.1 — 2019-06-04
- 0.1.0 — 2019-06-04
- 0.0.9 — 2019-06-04
- 0.0.8 — 2019-06-03
- 0.0.7 — 2019-05-28
- 0.0.6 — 2019-05-28
- 0.0.5 — 2019-05-28
- 0.0.4 — 2019-05-28
- … 3 more at https://npm.io/package/@saber2pr/router/versions

## README

# @saber2pr/router

[![npm](https://img.shields.io/npm/v/@saber2pr/router.svg?color=blue)](https://www.npmjs.com/package/@saber2pr/router)

> react-router-dom by hooks api.

> 支持 Router 嵌套.

> 支持 browserHistory、hashHistory

```bash
# from npm
npm install @saber2pr/router

# from github
git clone https://github.com/Saber2pr/@saber2pr/router.git
```

## 关于 Keep-Alive

> 原理 display none. 切换路由不会销毁 DOM 实例。

```tsx
export function KAlive({ children: C, isShow = 'none' }: KAliveProps) {
  const ref = useRef<HTMLDivElement>()

  useLayoutEffect(() => {
    ref.current.style.display = isShow
  }, [isShow])

  return <div ref={ref}>{C}</div>
}
```

## 与 Keep-Alive 有关的属性

- cache:boolean

```tsx
// 添加 cache 标记
<Router cache>
  <Route component={() => <div>1</div>} />
  <Route component={() => <div>2</div>} />
</Router>
```

- keep-live 会造成初始化 url 异常

---

# Feature

```tsx
import React from 'react'
import ReactDOM from 'react-dom'

import { Route, Router, Link, Redirect } from '@saber2pr/router'
import { browserHistory, hashHistory } from '@saber2pr/router'

const App = (
  <Router history={browserHistory}>
    <header>head</header>

    <nav>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>

        <li>
          <Link to="/blog">blog</Link>
        </li>

        <li>
          <Link to="/about">about</Link>
        </li>

        <li>
          <Link to="/login">login</Link>
        </li>
      </ul>
    </nav>

    <Route default path="/" component={() => <div>Hello World!</div>} />

    <Route path="/home" component={() => <div>home</div>} />
    <Route path="/blog" component={() => <div>blog</div>} />
    <Route path="/about" component={() => <div>about</div>} />

    <Route component={() => <h1>404 not Found</h1>} />

    <Redirect from="/" to="/home" />

    <footer>footer</footer>
  </Router>
)

ReactDOM.render(App, document.querySelector('#root'))
```

## usePush

```ts
import { usePush } from '@saber2pr/router'

const [push, getCurrentHref] = usePush()

push('/home')

getCurrentHref() // '/home'
```

---

# Dev

> need server.

## start

```bash
npm install
```

```bash
npm start

npm run dev

npm run serve

```

---

> Author: saber2pr

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