我在反应中遇到无限循环/内存泄漏问题。全局错误处理程序是这样启动的:
export const routesConfig: RouteObject[] = [
{
path: '/',
element: <App />,
errorElement: <ErrorPage />,
children: [
(all the routes)
],
},
];
用户会话会在一段时间后或用户手动注销后超时。如果有另一个选项卡打开或者用户回来,服务器将返回 401。所以我在 errorPage 中检查的第一件事是这个
if (err.statusCode === 401) {
window.location.href = '/?nocache=' + Date.now();
}
但这会导致无限循环并且浏览器崩溃。浏览器有数百次对没有缓存的起始页的调用,但它们都被取消了。看来这个
window.location.href
没有执行完全。如果我手动执行,它会起作用。
我有一个简单有效的解决方案:
let reloadTriggered = false;
if (err.statusCode === 401) {
if (!reloadTriggered) {
reloadTriggered = true;
window.location.href = '/?nocache=' + Date.now();
}
return;
}
但是我在这里所做的似乎并不是 React 的最佳实践。这里有什么建议吗?
不要使用 window.location.href,而是使用 React-router 中的 useNavigate。
const navigate = useNavigate();
if (err.statusCode === 401) {
navigate('/?nocache=' + Date.now())
}