如何在React函数组件外修改路由并让react-router感知到变更？

核心原理 #

react-router 的路由状态完全依赖底层的 history 实例，只要你在组件外部使用和 Router 组件绑定的同一个 history 实例执行跳转操作，react-router 就可以正常感知到路由变更，和组件内部调用 useHistory/useNavigate 效果完全一致。

适配 React Router v5 版本 #

操作步骤如下：

• 第一步：单独抽离创建公共 history 实例的工具文件，比如 src/utils/history.js

import { createBrowserHistory } from 'history'
// 导出全局公用的history实例
export const customHistory = createBrowserHistory()

• 第二步：修改项目入口文件，把默认的BrowserRouter替换为基础Router组件，传入自定义的history实例：

import React from 'react'
import ReactDOM from 'react-dom'
import { Router } from 'react-router-dom'
import { customHistory } from './utils/history'
import App from './App'

ReactDOM.render(
  <Router history={customHistory}>
    <App />
  </Router>,
  document.getElementById('root')
)

• 第三步：在任意非组件场景（事件驱动回调、工具函数等）直接导入实例调用跳转方法即可：

import { customHistory } from './utils/history'
// 普通跳转，会新增历史记录
customHistory.push('/target-route')
// 替换当前历史记录
customHistory.replace('/replace-route')
// 回退上一页
customHistory.goBack()

适配 React Router v6 版本 #

v6 版本移除了基础Router组件的history入参，官方提供了unstable_HistoryRouter组件支持自定义history实例，该API虽然带unstable前缀但已经稳定可用，是官方推荐的非组件场景路由操作方案。
操作步骤如下：

• 第一步：和v5一致，先抽离公共history实例，文件路径 src/utils/history.js

import { createBrowserHistory } from 'history'
export const customHistory = createBrowserHistory()

• 第二步：修改入口文件，用unstable_HistoryRouter替换默认的BrowserRouter：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
import { customHistory } from './utils/history'
import App from './App'

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

• 第三步：非组件场景调用方式和v5完全相同，导入customHistory实例调用对应方法即可。

注意：所有路由跳转操作都会被react-router正常感知，组件内部的useLocation、useParams、useNavigate等路由相关钩子都会同步更新状态，不需要额外做事件监听。
如果你的项目使用事件驱动系统做通信，也可以把路由跳转封装为事件回调，在需要触发的位置emit对应事件即可，无需直接耦合history实例。

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