Javascript React private Route无限渲染-获取错误：超过最大更新深度

如果用户经过身份验证，我将尝试在私有路由内呈现我的组件。但我一直在犯错误。 错误：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

为了查看用户是否经过身份验证，我从localStorage获取令牌

注释行const authed=true用于测试目的，它可以工作

“我的路线”组件如下所示：

import React from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';

import { RouteWithLayout } from './components';
import { Main as MainLayout, Minimal as MinimalLayout} from './layouts';

import {
  Dashboard as DashboardView,
  ProductList as ProductListView,
  UserList as UserListView,
  Typography as TypographyView,
  Icons as IconsView,
  Account as AccountView,
  Settings as SettingsView,
  NotFound as NotFoundView,
  Login as LoginView,
} from './views';

const Routes = () => {
  const authed = !!localStorage.getItem('token');
  //const authed = true;

  return (
    <Switch>
      <RouteWithLayout authed={authed} component={LoginView} exact layout={MinimalLayout} path="/login" />
      <Redirect exact from="/" to="/login" />
      {/*authed={this.state.authed}*/}
      <RouteWithLayout authed={authed} component={DashboardView} exact layout={MainLayout} path="/dashboard" />{' '}
      <RouteWithLayout authed={authed} component={UserListView} exact layout={MainLayout} path="/users" />
      <RouteWithLayout authed={authed} component={ProductListView} exact layout={MainLayout} path="/products" />
      <RouteWithLayout authed={authed} component={TypographyView} exact layout={MainLayout} path="/typography" />
      <RouteWithLayout authed={authed} component={IconsView} exact layout={MainLayout} path="/icons" />
      <RouteWithLayout authed={authed} component={AccountView} exact layout={MainLayout} path="/account" />
      <RouteWithLayout authed={authed} component={SettingsView} exact layout={MainLayout} path="/settings" />
      <RouteWithLayout authed={authed} component={NotFoundView} exact layout={MinimalLayout} path="/not-found" />
      <Redirect to="/not-found" />
    </Switch>
  );
};

export default Routes;

从“React”导入React；
从“react router dom”导入{交换机、重定向、路由}；
从“./components”导入{RouteWithLayout}；
从“/layouts”导入{Main as MainLayout，Minimal as MinimalLayout}；
进口{
仪表板作为仪表板视图，
ProductList作为ProductListView，
UserList作为UserListView，
排版作为排版视图，
图标作为图标视图，
帐户作为AccountView，
设置为设置视图，
NotFound作为NotFoundView，
以LoginView登录，
}来自“./视图”；
常数路由=（）=>{
const authed=！！localStorage.getItem（'token'）；
//const authored=true；
返回(
{/*authed={this.state.authed}*/}
{' '}
);
};
导出默认路径；

我的路线布局看起来像：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';

const RouteWithLayout = props => {
  const { authed, layout: Layout, component: Component, ...rest } = props;

  return (
    <Route
      {...rest}
      render={matchProps =>
        authed === true ? (
          <Layout>
            <Component {...matchProps} />
          </Layout>
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
};

RouteWithLayout.propTypes = {
  authed: PropTypes.any,
  component: PropTypes.any.isRequired,
  layout: PropTypes.any.isRequired,
  path: PropTypes.string,
  props: PropTypes.any.isRequired,
};

export default RouteWithLayout;

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“道具类型”导入道具类型；
const RouteWithLayout=道具=>{
const{authed，layout:layout，component:component，…rest}=props；
返回(
授权===真(
) : (
)
}
/>
);
};
RouteWithLayout.propTypes={
授权：PropTypes.any，
组件：PropTypes.any.isRequired，
布局：需要PropTypes.any.isRequired，
路径：PropTypes.string，
props:PropTypes.any.isRequired，
};
导出默认路由布局；

如果

auth===false

，您将无限重定向，因为

/login

路由使用

RouteWithLayout

给定的

auth===false

：

导航到/登录

使用RouteWithLayout逻辑

如果auth不为true，则重定向到/login

这些步骤只是一次又一次地重复，所以你需要一个登录路径的特殊案例——很多不同的方法来实现它

旁注：在仪表板路线之后，您有一个迷路的

{'}

---

另一个旁注：您可能仍在处理此部分，但值得一提的是，这是非常不安全的：

constauthed=！！getItem（'token'）该代码意味着任何非falsy值都将被接受为有效令牌，这意味着我可以手动向localStorage添加一个虚拟令牌并进行身份验证。
非常感谢！感谢你不仅花时间回答，而且让我看到我的错误。谢谢你怎么解决的？