React 在非组件环境切换路由

我的react-router-dom版本是6.16.0。之前在react中是这样配置路由的

App.jsx

import ReactDOM from react-dom/client;import { HashRouter, Route, Routes } from react-router-dom;const root  ReactDOM.createRoot(document.getElementById(app));root.render(    <HashRouter>       <Routes>        <Route            path{XXX}            element{<Component></Component>}            key{XXX} />        </Routes>    </HashRouter>);

然后使用axios做接口拦截当接口的是响应码是10000的时候跳转到登录页面10000表示接口返回token过期但是像上面这样使用路由该怎么在组件外面例如axios的逻辑中做路由跳转呢。

目前看这种方法好像无法做跳转。

可以使用下面的方式做

router/index.jsx

import { createHashRouter } from react-router-dom;export const router  createHashRouter([  {    path: /,    element: <Component />,  },]);

App.jsx

import React, { useEffect } from react;import { RouterProvider, createHashRouter } from react-router-dom;import { router } from /router;export default () > {  return (    <RouterProvider router{router} />  );};

然后如果组件外面想切换路由

就类似这样

import { router } from /router;router.navigate(/login);