如何通过window全局JavaScript函数控制React Router？

要在React中实现类似Vue的全局路由跳转函数，核心是把路由导航的实例暴露到全局，以下是两种适配不同React Router版本的实现方式：

方式一：React Router v6+ 推荐方案（基于createBrowserRouter） #

在路由初始化时，将创建好的router实例保存，并挂载全局跳转函数到window对象：

// src/router.js
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

// 创建路由实例
export const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
]);

// 挂载全局跳转函数到window
window.pushPath = (path) => {
  router.navigate(`/${path}`);
};

// 根组件渲染路由
function App() {
  return <RouterProvider router={router} />;
}

export default App;

之后在任意位置（组件内/外）都可以直接调用：

window.pushPath('about'); // 跳转到 /about

方式二：基于BrowserRouter（兼容旧版本或自定义场景） #

如果仍在使用BrowserRouter，需要手动创建history实例并传递给路由组件，再挂载全局函数：

1. 先安装依赖包：

npm install history

2. 实现代码：

// src/router.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Home from './pages/Home';
import About from './pages/About';

// 创建history实例
export const history = createBrowserHistory();

// 挂载全局跳转函数
window.pushPath = (path) => {
  history.push(`/${path}`);
};

// 根组件渲染路由
function App() {
  return (
    <BrowserRouter history={history}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

调用方式和上面一致：window.pushPath('about')

注意事项 #

• 确保路由实例/history对象在应用初始化时就完成创建，避免调用pushPath时出现未定义错误；
• 若使用TypeScript，需要给window添加类型声明以避免类型报错：

declare global {
  interface Window {
    pushPath: (path: string) => void;
  }
}

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