欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥$React框架$🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

本文被专栏【React–从基础到实战】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

编程式路由导航（useNavigate）

在router v5中，编程式路由导航只有在路由组件中才可以使用，借助的是路由组件独有的this.props.history这个属性。

那么在router v6中呢，只要是函数组件（FC）都可以通过useNavigate这个hook来使用编程式路由导航。

具体使用方式是：

import { useNavigate } from 'react-router-dom';
function Demo() {
	const navigate = useNavigate()
  function forward() {
    // 前进
    navigate(1)
  }
  function back() {
    // 后退
    navigate(-1)
  }
	<button onClick={forward}>前进</button>
  <button onClick={back}>后退</button>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

useNavigate是一个函数，通过传入的值来判断函数需要执行的操作是什么。

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}
1
2
3
4
5
6
7
8
9

options配置项只能接受两个参数：replace和state。

replace默认值是false，state用于传递路由组件的state参数。

search参数以及params参数不允许在options中配置，直接在路径中传递即可。

具体传递方式查阅本系列专栏前面的文章：

路由组件传参params/search/state（router v6）

传入number类型的值，代表前进与后退。

当然还可以通过传入路径，来定向导航到指定的路径（路由组件）：

<button onClick={() => showDetail(msgObj)}>显示详情</button>
function showDetail(msgObj) {
    navigate('detail', {
      replace: false,
      state: {
        id: msgObj.id,
        title: msgObj.title,
        content: msgObj.content
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11

这段代码的含义是：点击按钮，触发showDetail函数，函数中通过编程式路由导航，跳转到子路由detail路径下，跳转的方式是push，而不是replace。并且向子路由组件Detail传递state参数。