1回答

阿莱克斯刘

2025-02-13

在React Router v6中，`useNavigate`的确不能在非React组件中使用，我们需要采取不同的方法来实现路由跳转。处理401、token过期等情况时跳转到登录页面的问题可以尝试下面的做法

1. 创建一个导航模块
   ```typescript
   // navigation.ts
   import { createBrowserHistory } from 'history';
   export const history = createBrowserHistory();
   export const navigateToLogin = () => {
     history.push('/login');
   };
   ```

2. 在应用程序的根组件中使用`Router`并传递自定义history对象。
   ```typescript
   // App.tsx
   import { Router } from 'react-router-dom';
   import { history } from './navigation';
   import AppContent from './AppContent';

   const App = () => (
     <Router history={history}>
       <AppContent />
     </Router>
   );

   ```

3. 在axios拦截器中调用导航函数。根据响应状态码调用`navigateToLogin`函数。

   ```typescript
   // axiosInstance.ts
   import axios from 'axios';
   import { navigateToLogin } from './navigation';

   const axiosInstance = axios.create({
     // axios配置
   });

   axiosInstance.interceptors.response.use(
     response => response,
     error => {
       if (error.response && error.response.status === 401) {
         navigateToLogin();
       }
       return Promise.reject(error);
     }
   );

   export default axiosInstance;
   ```

通过这种方法，你就可以在非React组件中调用`navigateToLogin`函数，实现路由跳转。

0

0