如何在react路由器v6中的react组件之外使用导航器，如axios拦截器

Question

如何在react路由器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);
}
);
}

Answer 1

有几种方法可以处理这个问题。你可以在这个动作中访问你的商店(我认为它是Redux，但并不重要(，所以这意味着你可以在商店里放一些类似"；auth.status:401|404"；(值为"status"的单独"auth"还原器(。

所以你不必直接在行动中处理路由器。因此，您可以在根应用程序组件中创建"useEffect"(或实现"SwitchRouter"(，以检查传递的状态。

然后你可以通过像这样的react组件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，你可以使用"；放入"；在你的传奇生成器内的效果。