React-router-dom v6结合TypeScript使用useNavigate传参报错如何解决

报错原因 #

navigate方法的第二个参数为固定的NavigateOptions类型，不允许直接挂载自定义参数字段，所有需要跨页面传递的状态值都必须放到state属性下。

正确传参写法 #

const handleSelect = (id: number) => {
    navigate('/Players', {
      state: {
        userId: id
      }
    });
  };

目标页面取参方式 #

在/Players页使用useLocation钩子读取传递的参数：

import { useLocation } from 'react-router-dom';

const PlayersPage = () => {
  const location = useLocation();
  // TypeScript场景可自行给state添加类型声明避免类型警告
  const userId = location.state?.userId as number;
  
  // 后续业务逻辑
}

其他常用传参方式（URL可见参数） #

如果需要参数显示在URL上，可使用路由参数方案：

1. 先定义路由规则：

// 路由配置项
{
  path: '/Players/:userId',
  element: <PlayersPage />
}

2. 跳转传参写法：

const handleSelect = (id: number) => {
  navigate(`/Players/${id}`);
};

3. 目标页取参：

import { useParams } from 'react-router-dom';

const PlayersPage = () => {
  const { userId } = useParams<{userId: string}>();
  // 转换为数字：const userIdNum = Number(userId);
}

NavigateOptions常用合法字段说明 #

• state：用于存储跨页面传递的自定义状态，刷新页面后状态会丢失
• replace：布尔值，设为true时跳转后会替换当前历史栈记录，点击浏览器返回键不会回到上一页
• preventScrollReset：布尔值，设为true时跳转页面不会自动重置滚动条位置
• relative：控制相对路径的解析规则，可选值为route或path

内容的提问来源于stack exchange，提问作者GrillOwner69420