# umi-plugin-router-plus

> 一款 Umi 3 插件，为你带来类型友好的页面参数的定义、传递与获取。

Latest version **1.8.1** (published 2021-09-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install umi-plugin-router-plus
pnpm add umi-plugin-router-plus
yarn add umi-plugin-router-plus
bun add umi-plugin-router-plus
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.1 |
| Published | 2021-09-05 |
| First published | 2020-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 39 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jay Fong |
| Maintainers | funch |
| Keywords | umi, umi3, umi-plugin, router |

## Links

- npm: https://www.npmjs.com/package/umi-plugin-router-plus
- Repository: https://github.com/fjc0k/umi-plugin-router-plus
- Issues: https://github.com/fjc0k/umi-plugin-router-plus/issues
- npm.io page: https://npm.io/package/umi-plugin-router-plus

## Dependencies (1)

- [vtils](https://npm.io/package/vtils.md) ^4.14.1

## 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.8.1 (latest) — 2021-09-05
- 1.8.0 — 2021-01-03
- 1.7.0 — 2021-01-03
- 1.6.0 — 2020-12-31
- 1.5.1 — 2020-12-30
- 1.5.0 — 2020-10-11
- 1.4.1 — 2020-08-15
- 1.4.0 — 2020-04-08
- 1.3.0 — 2020-04-01
- 1.2.0 — 2020-04-01
- 1.1.2 — 2020-03-31
- 1.1.1 — 2020-03-31
- 1.1.0 — 2020-03-31
- 1.0.0 — 2020-03-31
- 0.0.1 — 2020-03-08

## README

# umi-plugin-router-plus ![Node CI](https://github.com/fjc0k/umi-plugin-router-plus/workflows/Node%20CI/badge.svg) [![codecov](https://codecov.io/gh/fjc0k/umi-plugin-router-plus/branch/master/graph/badge.svg)](https://codecov.io/gh/fjc0k/umi-plugin-router-plus)

一款 [Umi 3](https://github.com/umijs/umi) 插件，为你带来**类型友好**的**页面参数的定义、传递与获取**。

---

<!-- TOC depthFrom:2 -->

- [安装](#安装)
- [启用方式](#启用方式)
- [使用介绍](#使用介绍)
  - [定义页面参数](#定义页面参数)
  - [获取页面参数](#获取页面参数)
  - [传递页面参数](#传递页面参数)
- [API 列表](#api-列表)
  - [navigateTo(pageName, params)](#navigatetopagename-params)
  - [redirectTo(pageName, params)](#redirecttopagename-params)
  - [navigateBack(delta)](#navigatebackdelta)
  - [navigateForward(delta)](#navigateforwarddelta)
  - [usePageName()](#usepagename)
  - [usePageParams(pageName)](#usepageparamspagename)
  - [usePageQuery()](#usepagequery)
  - [useQuery()](#usequery)
- [页面名称](#页面名称)
- [许可](#许可)

<!-- /TOC -->

## 安装

```bash
# npm
npm i umi-plugin-router-plus -D

# or yarn
yarn add umi-plugin-router-plus -D

# or pnpm
pnpm add umi-plugin-router-plus -D
```

## 启用方式

默认开启。

## 使用介绍

### 定义页面参数

在页面文件内定义 `Params` 类型，并将之导出即可：

```tsx
// src/pages/test.tsx

export interface Params {
  id: number
  enabled?: boolean
  gender: 'male' | 'female'
  name: string
  tags?: string[]
}
```

### 获取页面参数

在页面文件内定义好页面参数后，只需在页面组件内使用 `usePageParams` 即可获取：

```tsx
// src/pages/test.tsx
import React from 'react'
import { usePageParams } from 'umi'

export interface Params {
  id: number
  enabled?: boolean
  gender: 'male' | 'female'
  name: string
  tags?: string[]
}

export default function () {
  const {
    id,
    enabled = false, // 指定默认值
    gender,
    name,
    tags = [],
  } = usePageParams('Test')

  return <div>id is: {id}</div>
}
```

### 传递页面参数

见下：[API 列表](#api-列表)。

## API 列表

### navigateTo(pageName, params)

```ts
import { navigateTo } from 'umi'

navigateTo('Index')
navigateTo('User', { id: 2 })
```

保留当前页面，跳转至某个页面，和 `history.push` 效果一致。

### redirectTo(pageName, params)

```ts
import { redirectTo } from 'umi'

redirectTo('Index')
redirectTo('User', { id: 2 })
```

关闭当前页面，跳转至某个页面，和 `history.replace` 效果一致。

### navigateBack(delta)

```ts
import { navigateBack } from 'umi'

navigateBack()
navigateBack(2)
```

关闭当前页面，返回上一页面或多级页面，和 `history.goBack` 效果一致。

### navigateForward(delta)

```ts
import { navigateForward } from 'umi'

navigateForward()
navigateForward(2)
```

保留当前页面，前进到下一页面或多级页面，和 `history.goForward` 效果一致。

### usePageName()

```ts
import { usePageName } from 'umi'

const pageName = usePageName()
```

获取当前页面的名称。

### usePageParams(pageName)

```ts
import { usePageParams } from 'umi'

const { id } = usePageParams('User')
```

获取传给页面的参数，**会继承所有父 layout 页面定义的参数**。

### usePageQuery()

```ts
import { usePageQuery } from 'umi'

const { source } = usePageQuery<{
  source: string
}>()
```

获取传给页面的 query。

### useQuery()

同 `usePageQuery`，不再推荐使用，未来版本会被移除。

## 页面名称

页面名称会根据路由的 `path` 自动生成，如果程序没有提示你页面名称重复，大可不必深究。

比如，页面路径 `/user/detail` 生成的页面名称为 `UserDetail`。

## 许可

Jay Fong (c) MIT

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