英文:
Navigate to some base BrowserRouter's base route from another BrowserRouter showing "Warning: Maximum update depth exceeded."
问题
在从一个BrowserRouter导航到另一个BrowserRouter时，它显示"Maximum update depth exceeded"。
警告：最大更新深度超过限制。这可能发生在一个组件在
useEffect内部调用setState，但useEffect要么没有依赖数组，要么依赖数组中的某个依赖在每次渲染时都发生变化。
应用代码
export const App = () => {
return (
<ErrorBoundary>
<BrowserRouter basename="">
<Navigate to="base-route" />
</BrowserRouter>
<BrowserRouter basename="base-route">
<Router />
</BrowserRouter>
</ErrorBoundary>
);
};
英文:
While navigating from one BrowserRouter to other BrowserRouter's it's showing "Maximum update depth exceeded".
> Warning: Maximum update depth exceeded. This can happen when a > component calls setState inside useEffect, but useEffect either > doesn't have a dependency array, or one of the dependencies changes on > every render.
App code
export const App = () => {
return (
<ErrorBoundary>
<BrowserRouter basename="">
<Navigate to="base-route" />
</BrowserRouter>
<BrowserRouter basename="base-route">
<Router />
</BrowserRouter>
</ErrorBoundary>
);
};
答案1
得分: 1
以下是您要翻译的内容：
第一个路由器无条件地渲染Navigate组件，从而创建渲染循环。在路由上渲染Navigate，例如"/"，这样只有在匹配"/"路径时才会有条件地调用它。
示例：
export const App = () => {
return (
<ErrorBoundary>
<BrowserRouter>
<Routes>
<Route path="/" element={<Navigate to="base-route" replace />} />
</Routes>
</BrowserRouter>
<BrowserRouter basename="base-route">
<Router />
</BrowserRouter>
</ErrorBoundary>
);
};
请注意，通过这样做，具有"/base-route"路径的第二个路由器将不知道由第一个路由器分发和处理的导航操作，并且不会重新渲染以显示正确的路由内容。您可以通过进行小的重构来在客户端端解决此问题，以额外触发页面重新加载。
示例：
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
const BaseRedirect = ({ to, replace }) => {
useEffect(() => {
window.location.reload();
}, []);
return <Navigate to={to} replace={replace} />;
};
export const App = () => {
return (
<ErrorBoundary>
<BrowserRouter>
<Routes>
<Route path="/" element={<BaseRedirect to="base-route" replace />} />
</Routes>
</BrowserRouter>
<BrowserRouter basename="base-route">
<Router />
</BrowserRouter>
</ErrorBoundary>
);
};
如果您希望避免此客户端端页面重新加载，那么您应该配置服务器返回第一个URL的301响应，以将客户端，例如浏览器，重定向到第二个URL。
英文:
The first router is unconditionally rendering the Navigate component which creates the render looping. Render Navigate on a route, e.g. "/", so it is conditionally called only when the "/" path is matched.
Example:
export const App = () => {
return (
<ErrorBoundary>
<BrowserRouter>
<Routes>
<Route path="/" element={<Navigate to="base-route" replace />} />
</Routes>
</BrowserRouter>
<BrowserRouter basename="base-route">
<Router />
</BrowserRouter>
</ErrorBoundary>
);
};
Note that by doing this the second router with the "/base-route" path won't be aware of the navigation action that was dispatched and handled by the first router, and won't rerender to display the correct routed content. You can resolve this on the client-side with a small refactor to additionally trigger a page reload.
Example:
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
const BaseRedirect = ({ to, replace }) => {
useEffect(() => {
window.location.reload();
}, []);
return <Navigate to={to} replace={replace} />;
};
export const App = () => {
return (
<ErrorBoundary>
<BrowserRouter>
<Routes>
<Route path="/" element={<BaseRedirect to="base-route" replace />} />
</Routes>
</BrowserRouter>
<BrowserRouter basename="base-route">
<Router />
</BrowserRouter>
</ErrorBoundary>
);
};
If you wish to avoid this client-side page reload then you should configure the server to return a 301 response for the first URL to redirect the client, e.g. the browser, to the second URL.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论