欢迎来到我的博客 📔博主是一名大学在读本科生，主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 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>
}

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

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
          
   
  (
    to: To,
    options?: {
          
    replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

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

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

search参数以及params参数不允许在options中配置，直接在路径中传递即可。 具体传递方式查阅本系列专栏前面的文章：

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

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

<button onClick={
          
   () => showDetail(msgObj)}>显示详情</button>
function showDetail(msgObj) {
          
   
    navigate(detail, {
          
   
      replace: false,
      state: {
          
   
        id: msgObj.id,
        title: msgObj.title,
        content: msgObj.content
      }
    })
  }

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