React Router v6中CreateBrowserHistory()的替代方案：如何在顶层实现路由跳转？

React Router v6移除了useHistory和createBrowserHistory的直接使用方式，但仍有两种可靠方案实现顶层（非组件内）的路由跳转：

方案一：使用unstable_HistoryRouter（兼容v5写法） #

虽然API名称带有unstable_前缀，但React Router官方明确表示该API不会被移除，仅处于迭代完善阶段，适合需要兼容旧代码逻辑的场景。

实现步骤： #

1. 安装独立的history包（React Router v6不再内置该包）：

npm install history

2. 创建并导出history对象，用HistoryRouter替代原Router组件：

import React from 'react';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import App from './App';

export const history = createBrowserHistory();

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <HistoryRouter history={history}>
    <App />
  </HistoryRouter>
);

3. 在顶层代码中直接使用导出的history对象：

switch (status) {
  case 404:
    history.push('/not-found');
    break;
}

方案二：创建全局导航服务（推荐，符合v6设计理念） #

这种方案无需依赖不稳定API，通过在组件内捕获navigate函数并全局存储，实现顶层调用：

实现步骤： #

1. 创建全局导航服务文件（比如src/utils/navigateService.ts）：

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

let navigate: NavigateFunction;

export const setNavigate = (navFunc: NavigateFunction) => {
  navigate = navFunc;
};

export const getNavigate = () => navigate;

2. 在应用根组件中，用useNavigate获取函数并保存到服务：

import { useNavigate, useEffect } from 'react-router-dom';
import { setNavigate } from './utils/navigateService';

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

  useEffect(() => {
    setNavigate(navigate);
  }, [navigate]);

  return (
    {/* 你的应用组件内容 */}
  );
}

3. 在顶层代码中调用全局导航服务：

import { getNavigate } from './utils/navigateService';

switch (status) {
  case 404:
    const navigate = getNavigate();
    if (navigate) {
      navigate('/not-found');
    }
    break;
}

注意事项： #

• 确保getNavigate()调用时，setNavigate已经执行（即App组件已挂载），需添加空值判断避免报错。
• 这种方式更贴合React Router v6的设计思路，避免直接操作history实例。

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