react-router-dom 13.x.x编译报错：BrowserRouter不支持history属性

安全阿岳

2026-7-16

解决react-router-dom 13.x.x中BrowserRouter传入history属性的TS2769错误

问题核心原因

react-router-dom从v6版本开始就逐步废弃了直接给BrowserRouter传入自定义history实例的用法，到v13.x.x时，BrowserRouter组件已完全移除了history属性的支持。本地运行正常可能是因为TypeScript配置严格度较低（比如strict: false）或缓存未触发校验，但云端编译通常采用更严格的类型检查规则，所以暴露了这个错误。

解决方案

1. 使用官方推荐的`createBrowserRouter`+`RouterProvider`（优先选择）

这是v6+版本的标准路由写法，替代旧版BrowserRouter结合自定义history的模式：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// 定义路由配置
const router = createBrowserRouter([
  {
    path: '/',
    element: <YourRootComponent />,
    children: [
      // 子路由配置示例
      { path: 'about', element: <AboutPage /> },
      { path: 'contact', element: <ContactPage /> }
    ]
  }
]);

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

export default App;

2. 特殊场景下需自定义history的处理

如果确实需要自定义history实例（比如测试场景），可以使用createMemoryRouter配合第三方history库实现同步：

import { RouterProvider, createMemoryRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
// 初始化路由
const router = createMemoryRouter(
  [/* 你的路由配置 */],
  { initialEntries: [history.location.pathname] }
);

// 同步history与router的跳转状态
history.listen(({ pathname }) => {
  router.navigate(pathname);
});

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