React项目JS转TS时BrowserRouter传history属性类型报错如何解决？

该报错说明你当前使用的react-router-dom v6及以上版本中，BrowserRouter 组件已内置history实例，官方从类型定义和实现层面都移除了对外的history入参，你传入的自定义history属性不属于BrowserRouter支持的属性范围，因此TS抛出了类型不匹配错误。

根据你的实际需求选择以下两种方案即可：

• 方案1：保留自定义history实例
  如果你需要在组件外部（比如请求拦截器、工具函数中）主动操作路由跳转，不要使用BrowserRouter，改用支持传入自定义history的HistoryRouter组件即可：

// 导入部分修改，6.4以下版本react-router-dom需导入unstable_HistoryRouter
import { HistoryRouter as Router, Route, Routes } from "react-router-dom";
import history from "../src/history";

// 组件使用
<Router history={history}>
  {/* v6版本已废弃Switch组件，替换为Routes */}
  <Routes>
    {/* 你的路由规则 */}
    <Route path="/xxx" element={<YourComponent />} />
  </Routes>
</Router>

• 方案2：删除自定义history，使用默认路由能力
  如果你没有在组件外部操作路由的需求，直接删除自定义的history.ts文件，使用BrowserRouter的默认配置即可：

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

<Router>
  <Routes>
    {/* 你的路由规则 */}
  </Routes>
</Router>

如果需要在组件内部实现路由跳转，使用v6提供的useNavigate hook即可，示例如下：

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

function YourComponent() {
  const navigate = useNavigate();
  // 跳转逻辑
  const goToPage = () => navigate('/target-path');
  return <button onClick={goToPage}>跳转</button>
}

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