使用专用反应路由器路由时“最大更新深度超过”
使用专用反应路由器路由时“最大更新深度超过”
提问于 2021-02-03 08:30:01
我已经按照这篇文章。实现了我自己的专用反应路由器路由
如果从/sign-in返回的用户对象为null，我希望重定向到useProvideAuth。
const PrivateRoute = (props) => {
const { children, path, ...rest } = props;
const { user } = useProvideAuth();
return (
<Route
{...rest}
render={({ location }) => {
return user ? (
children
) : (
<Redirect
to={{
pathname: "/login",
state: { from: location }
}}
/>
);
}}
></Route>
);
};当我使用Maximum update depth exceeded时，我会得到一个PrivateRoute错误。我已经设置了一个密码箱来演示。
https://codesandbox.io/s/pensive-paper-u9q86
谢谢
Stack Overflow用户
回答已采纳
发布于 2021-02-03 08:43:41
我快速地看了一下沙箱代码。PrivateRoute组件的设置很好，但问题在于路由的组合方式。它们应该由react-router-dom的react-router-dom组件组成。
由于缺少<Switch>，所以正在呈现所定义的两个路由。每次呈现/路由时，PrivateRoute组件都会将用户重定向到/sign-in，并且这个过程在循环中继续进行，从而超过了javascript堆栈的大小。
如果您将路由组件更新为包含在Switch中的路由，则它将工作：
const Routes = () => {
return (
<BrowserRouter>
<Switch>
<Route path="/sign-in">
<SignIn />
</Route>
<PrivateRoute path="/">
<Home />
</PrivateRoute>
</Switch>
</BrowserRouter>
);
};请注意，Switch应该从react-router-dom包中导入。
沙箱链接：https://codesandbox.io/s/nervous-bush-p591h
注：
我注意到的另一件事是，登录路由被定义为/sign-in，而在PrivateRoute组件中，用户被重定向到/login，以防用户未被授权。这两条路线应该是同步的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66023758
复制相关文章
相似问题
腾讯云开发者
