react router v6组件外部使用导航？

Question

我想要在接口返回401状态时，传递参数重定向到login页面

以下是axios的返回拦截器

// request.ts
service.interceptors.response.use(response=>{
    return Promise.resolve(response.data)
},err=>{
    if (err.response.status == 401) {
        // * 在此处重定向到login
    }
    return Promise.reject(err)
})

Answer 1

自己封装一个Router出来，代码如下

import React from 'react';
import type { History } from 'history';
import type { BrowserRouterProps as NativeBrowserRouterProps } from 'react-router-dom';
import { Router } from 'react-router-dom';

export interface BrowserRouterProps extends Omit<NativeBrowserRouterProps, 'window'> {
  history: History;
}

const BrowserRouter: React.FC<BrowserRouterProps> = React.memo((props) => {
  const { history, ...restProps } = props;
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });

  React.useLayoutEffect(() => history.listen(setState), [history]);

  return <Router {...restProps} location={state.location} navigationType={state.action} navigator={history} />;
});

export default BrowserRouter;

再封装一个公共的history

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
export default history;

公共入口改成这样

// 自定义的 history
import history from '@/router/history';
// 自定义的 BrowserRouter 
import BrowserRouter from '@/router/BrowserRouter';

createRoot(document.getElementById('root')).render(
  <BrowserRouter history={history}>    
     <RouterConfig />    
  </BrowserRouter>
);

在其他地方只需要引入history使用就行

Answer 2

https://www.jianshu.com/p/c1a...

Answer 3

特意注册上来回答这个问题，前几天我也在纠结这个，现在我认为是不应该将axios封装成一个模块，而是封装成一个hooks，这样就不会存在这个问题了，可以正常使用useNavigate。

import axios from "axios";
import { useNavigate } from "react-router-dom";

const useAxios = () => {
  const navigate = useNavigate();

  const instance = axios.create({});

  // 请求拦截器
  instance.interceptors.request.use(
    function (config) {
      return config;
    },
    function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    }
  );

  // 响应拦截器
  instance.interceptors.response.use(
    function ({ response }) {
      // 对响应数据做点什么
      const { data, status } = response;

      // 请求成功时进行响应处理
      switch (status) {
        case 200:
          return data;
        case 401: // 没有权限 包括未登录/登录超时
          navigate("/login");
          return Promise.reject(data);
        default:
          return Promise.reject(data);
      }
    },
    function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    }
  );

  return instance;
};

export default useAxios;