React Router DOM v6搭配history v5出现TS类型错误求助

问题根源 #

React Router DOM v6.4+重构了内部路由逻辑，其HistoryRouter所需的History类型与第三方history库（v5.x）导出的BrowserHistory类型不再兼容——前者要求的createURL、encodeLocation属性是后者没有的，因此触发ts(2739)类型错误。

解决方案 #

方案1：放弃自定义history，使用官方默认路由组件

如果不需要手动操控历史记录的特殊需求，直接替换为BrowserRouter即可，这是React Router v6推荐的常规用法：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

方案2：适配React Router的History类型（需自定义history场景）

如果必须使用自定义history实例，需要补全History类型要求的缺失属性，基于history库实例封装：

import { HistoryRouter, type History } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import RoutesConfig from './RoutesConfig';

// 创建原生BrowserHistory实例
const browserHistory = createBrowserHistory();

// 补全React Router History类型所需的属性
const adaptedHistory: History = {
  ...browserHistory,
  // 复用原生createHref实现createURL
  createURL: (location) => browserHistory.createHref(location),
  // 简单实现encodeLocation，可根据业务需求调整编码逻辑
  encodeLocation: (location) => ({ ...location }),
};

function App() {
  return (
    <HistoryRouter history={adaptedHistory}>
      <RoutesConfig />
    </HistoryRouter>
  );
}

export default App;

方案3：迁移到React Router v6.4+新路由API（推荐）

React Router v6.4+推出了基于@remix-run/router的新API，完全替代了传统的HistoryRouter，避免类型兼容问题：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './Home';
import About from './About';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

注意事项 #

• 第三方history库已不再是React Router v6.4+的依赖，官方推荐使用新路由API来实现所有路由需求。
• 若坚持使用history库，需确保自定义的adaptedHistory中encodeLocation逻辑符合你的URL编码规则，避免路由跳转异常。

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