react-router v6中如何在react组件外使用navigator，如axios拦截器答案

【问题标题】：How to use navigator outside a react component in react-router v6，like axios interceptorreact-router v6中如何在react组件外使用navigator，如axios拦截器
【发布时间】：2020-12-30 01:28:27
【问题描述】：

如何在 react-router v6 中导航？ BrowerRouter 中没有 history 属性。而且我不想使用window.location.href 来强制重定向。

export function setResponseInterceptor(store: AppStore) {
  console.log('setup response interceptor');
  httpClient.interceptors.response.use(
    (response) => response,
    (error) => {
      if (error.isAxiosError && error.response) {
        switch (error.response.status) {
          case 401:
            // dispatch logout action and navigate to `login` page
            break;
          case 404:
            // navigate to 404 page
            break;
          case 500:
            return Promise.reject(new Error(error.response.statusText));
          default:
            return Promise.reject(new Error(error.response.data.message));
        }
      }
      return Promise.reject(error.message || error);
    }
  );
}

【问题讨论】：

标签： reactjs react-redux react-router

【解决方案1】：

有几种方法可以处理这个问题。您可以在此操作中访问您的商店（我假设它是 Redux，但并不重要），因此这意味着您可以在商店中放入类似“auth.status：401 | 404”（一个单独的 'auth '减速器，值为'status'）。

因此您不必在实际操作中直接处理路由器。因此，您可以在根应用程序组件中创建“useEffect”（或实现“SwitchRouter”）来检查正在传递的状态。

那么你可以像这样通过 react components api 使用路由器

const history = useHistory(); // hook provided by react-router.
useEffect(() => {
  if (auth.status === 404) history.push('/404');
  if (auth.status === 401) history.push('/login');
}, [auth.status]);

否则，如果您使用 react-sagas - 您可以在 saga 生成器中使用“放置”效果。

【讨论】：