umi-plugin-router-plus

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

• 安装
• 启用方式
• 使用介绍
  • 定义页面参数
  • 获取页面参数
  • 传递页面参数
• API 列表
  • navigateTo(pageName, params)
  • redirectTo(pageName, params)
  • navigateBack(delta)
  • navigateForward(delta)
  • usePageName()
  • usePageParams(pageName)
  • usePageQuery()
  • useQuery()
• 页面名称
• 许可

安装

# 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 类型，并将之导出即可：

// src/pages/test.tsx

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

获取页面参数

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

// 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 列表

navigateTo(pageName, params)

import { navigateTo } from 'umi'

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

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

redirectTo(pageName, params)

import { redirectTo } from 'umi'

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

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

navigateBack(delta)

import { navigateBack } from 'umi'

navigateBack()
navigateBack(2)

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

navigateForward(delta)

import { navigateForward } from 'umi'

navigateForward()
navigateForward(2)

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

usePageName()

import { usePageName } from 'umi'

const pageName = usePageName()

获取当前页面的名称。

usePageParams(pageName)

import { usePageParams } from 'umi'

const { id } = usePageParams('User')

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

usePageQuery()

import { usePageQuery } from 'umi'

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

获取传给页面的 query。

useQuery()

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

页面名称

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

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

许可

Jay Fong (c) MIT