React-Router-Dom V6升级：<Router history>报错及<BrowserRouter>历史丢失问题

问题原因 #

React Router v6 彻底重构了底层路由管理逻辑，原 v5 中 <Router> 接收 history prop 的写法已被移除，直接传入自定义 createBrowserHistory 实例会触发报错。而 <BrowserRouter> 内部会创建独立的 history 实例，无法与你全局导出的 history 对象共享，导致依赖该对象的浏览历史功能失效。

两种解决方案 #

方案一：保留全局 history 实例（使用不稳定 API） #

如果必须继续使用原有的全局 history 对象（比如组件外跳转场景），可以使用 v6 提供的 unstable_HistoryRouter 组件（注意：该 API 标记为不稳定，未来版本可能调整，但 v6.7+ 可正常使用）：

替换原 <Router> 组件：

import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
import { history } from './你的history文件路径';

function App() {
  // ... 其他逻辑
  return (
    <CurrentUserContextProvider>
      <HistoryRouter history={history}>
        <div ...>
          <Header />
          <MainBody />
        </div>
      </HistoryRouter>
    </CurrentUserContextProvider>
  );
}

原有的 history.push、history.goBack 等调用可继续生效。

方案二：迁移到 v6 原生稳定 API（推荐） #

v6 官方推荐使用 createBrowserRouter + RouterProvider 管理路由，用 useNavigate 钩子替代组件内的 history 操作，组件外跳转可通过导出 router 实例实现：

步骤1：创建路由配置文件

// router.js
import { createBrowserRouter } from 'react-router-dom';
import App from './App';
// 导入你的页面组件
import Home from './pages/Home';
import Profile from './pages/Profile';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Home /> }, // 根路由
      { path: 'profile', element: <Profile /> }, // 子路由
    ],
  },
]);

// 组件外跳转示例（比如工具函数、redux action）
export const navigateOutsideComponent = (path) => {
  router.navigate(path);
};

步骤2：修改入口文件（index.js）

import { RouterProvider } from 'react-router-dom';
import { router } from './router';
import { CurrentUserContextProvider } from './你的上下文路径';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <CurrentUserContextProvider>
      <RouterProvider router={router} />
    </CurrentUserContextProvider>
  </React.StrictMode>
);

步骤3：组件内使用 useNavigate 替代 history

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

function Header() {
  const navigate = useNavigate();

  const handleGoBack = () => {
    navigate(-1); // 替代 history.goBack()
  };

  const handleGoProfile = () => {
    navigate('/profile'); // 替代 history.push('/profile')
  };

  return (
    <header>
      <button onClick={handleGoBack}>返回</button>
      <button onClick={handleGoProfile}>我的主页</button>
    </header>
  );
}

关于原项目使用 <Router> 的推测 #

在 v5 中，自定义 history 实例通常用于两种场景：

1. 需要在组件外部（如工具函数、状态管理中间件）触发路由跳转；
2. 统一配置 history 的行为（比如监听路由变化做埋点）。
   v6 通过上述稳定 API 可以覆盖这些场景，无需依赖外部 history 库。

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