使用专用反应路由器路由时的"Maximum update depth exceeded"

Question

我已经按照本文实现了我自己的私有反应路由器路由。

如果从useProvideAuth返回的用户对象为空，我想重定向到/sign-in。

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>
);
};

当我使用PrivateRoute时，我得到Maximum update depth exceeded错误。我已经设置了一个代码盒来演示。

https://codesandbox.io/s/pensive-paper-u9q86

感谢

Answer 1

我快速浏览了一下沙盒代码。PrivateRoute组件的设置很好，但问题是路由的组成方式。它们应该在react-router-dom的<Switch>组件内组成。

由于<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，以防用户未被授权。这两个路由应该同步。

Answer 2

你可能犯的另一个错误是用Protected route包装登录路由。即

<PrivateRoute path="/login">
<Login />
</PrivateRoute>