React Router(v6) useNavigate遇TS2345错误：数字类型不可赋值给To类型

你遇到的TS2345错误是因为TypeScript未识别navigate函数支持数字参数（用于历史记录前进/后退），以下是几种可行的解决办法：

• 方法1：匹配类型定义包版本
  确保@types/react-router-dom的版本与项目中react-router-dom的版本完全一致。若使用react-router-dom@6.x，执行以下命令安装对应类型包：

  npm install @types/react-router-dom@^6 --save-dev
  # 或使用yarn
  yarn add @types/react-router-dom@^6 --dev
  

  升级后TypeScript会自动识别数字参数的合法性。

• 方法2：添加类型断言
  若暂时无法升级依赖，可通过类型断言明确告知TypeScript参数合法：

  const navigate = useNavigate()
  
  useEffect(() => {
    setIsLoading(true);
    dispatch(fetchUser(userId!))
      .unwrap()
      .then(({ data }: { data: User }) => {
        setIsLoading(false);
        setUser(data);
      })
      .catch(() => navigate(-1 as unknown as To, { replace: true }));
  }, []);
  

  先断言为unknown再转为To类型，避免直接断言引发的类型风险。

• 方法3：使用原生历史API
  若仅需回退一步，可直接调用浏览器原生API替代：

  .catch(() => window.history.back());
  

  这种方式无需依赖React Router的navigate函数，也不会触发类型错误。

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