React Router v6 如何在组件外部调用navigate实现页面跳转？

解决方案1：继续沿用自定义history实例（和v5使用逻辑一致） #

React Router v6没有完全移除对自定义history对象的支持，仅需要替换使用的路由组件即可：

1. 手动安装v5版本的history依赖：

npm install history@5

2. 自定义history实例的代码和v5完全一致：

// src/utils/history.js
import { createBrowserHistory } from "history";
export const history = createBrowserHistory();

3. 路由入口用HistoryRouter替换原来的Router组件，传入自定义history：

import { HistoryRouter, Routes, Route, Link } from "react-router-dom";
import { history } from './utils/history';

function App() {
  return (
    <HistoryRouter history={history}>
      {/* v6用Routes替代Switch，路由组件通过element prop传入 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </HistoryRouter>
  );
}

注：如果使用v6.4以下版本，HistoryRouter还未稳定，需要用如下方式导入：

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";

配置完成后你在store的action中调用history.push的逻辑完全不需要修改，可以直接沿用。

解决方案2：全局挂载navigate实例（无需额外依赖） #

如果不想额外引入history依赖，也可以通过全局挂载的方式暴露navigate方法：

1. 在应用顶层组件中调用useNavigate并挂载到全局导出：

// src/App.js
import { useNavigate, Routes, Route } from "react-router-dom";

export let navigate = null;

function App() {
  navigate = useNavigate();
  return (
    <Routes>
      {/* 路由配置 */}
    </Routes>
  );
}

2. 在store中直接导入使用：

// store的action文件
import { navigate } from '../App';

logout() {
  this.user = null;
  navigate('/');
}

注意：该方案需要确保调用navigate时App组件已经完成挂载，避免拿到null值，适合应用初始化完成后的操作场景使用。

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