使用react路由器dom在reactJS中验证路由

说明：：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我正在开发reactJS应用程序，并使用它进行路由。如果用户未进行身份验证，则转到“”，并在成功登录后重定向到“”。重新加载此页面后，将显示空白页面

为了解决这个问题，我在我的基本url之后添加了“/app”，现在它位于每个路由url之前。现在，内部页面路由类似于“”。 但我不想在每个路由元素之前添加“app”， 我需要路由url应该是，基本url/页面路由路径

空白页路由：：

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

const InitialPath = ({ component: Component, authUser, ...rest }) => {
   return (<Route
         {...rest}
         render={props =>
            authUser
               ? <Component {...props} />
               :
               <Redirect
                  to={{
                     pathname: '/login',
                     state: { from: props.location }
                  }}
               />
         }
      />
   )
}

class App extends Component {
   constructor(props) {
      super(props);
   }

   render() {
      let isUserLogggedIn = localStorage.getItem('isUserLoggedIn');
      const { location, match } = this.props;
      let url = location.pathname.split('/');
      if (location.pathname === '/login') {
         localStorage.clear();
      }
      if (location.pathname === '/') {
         if (!isUserLogggedIn) {
            return (<Redirect exact from='/' to={`${match.url}login`} />);
         } else {
            return (<Redirect exact from='/' to={`${match.url}app`} />);
         }
      }
      if ((url[1] !== "app") && (url[1] !== "login")) {
         return (<Redirect exact from={location.pathname} to={`${match.url}login`} />);
      }
      return (
         <>
            <BrowserRouter>
               <Switch>
                  <InitialPath
                     path={`${match.url}app`}
                     authUser={isUserLogggedIn}
                     component={DefaultLayout}
                     location={location}
                  />
                  <Route path='/login' component={Login} />
               </Switch>
            </BrowserRouter>
         </>
      );
   }
}

export default App;

---

我认为URL没有问题

尝试将

localStorage

内容处理到

render

方法中并不是最好的主意。您应该对其使用生命周期方法，即

componentDidMount

，

componentdiddupdate

你的

App

组件似乎被逻辑淹没了。身份验证逻辑应该被放入

登录

组件中，当它（

登录

）挂载时，应该清除存储。当用户成功进行身份验证时，它（

Login

）应将会话id保存到存储器中

下一件事是你自己搞乱位置是没有必要的，让

react router

为你做这件事吧

class App extends Component {
  componentDidUpdate () {
    this.setState({ isUserLoggedIn: !!localStorage.getItem("isUserLoggedIn") });
  }

  render () {
    const { isUserLogggedIn } = this.state;

    return (
      <BrowserRouter>
        <Switch>
          <InitialPath
            path="/dashboard"
            authUser={isUserLogggedIn}
            component={DefaultLayout}
            location={location}
          />
          <Route path="/login" component={Login} />
        </Switch>
      </BrowserRouter>
    );
  }
}

class Login extends Component {
  componentDidMount () {
    localStorage.removeItem("isUserLogggedIn");
  }

  render () {
    // some render stuff
    //
    // after successfull login
    // you should save `isUserLogggedIn` into localStorage 
    // and redirect to the main page
  }
}

类应用程序扩展组件{
组件更新（）{
this.setState（{isUserLoggedIn:！！localStorage.getItem（“isUserLoggedIn”）}）；
}
渲染（）{
const{isUserLogggedIn}=this.state；
返回(
);
}
}
类登录扩展组件{
组件安装（）{
removietem（“isUserLogggedIn”）；
}
渲染（）{
//一些渲染的东西
//
//成功登录后
//您应该将'isUserLogggedIn'保存到本地存储中
//并重定向到主页
}
}

我已经实现了这一点，但它显示了错误：超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。哦，当然，你应该检查以前的道具和状态以及新的道具和状态以防止循环更新。我刚才回答了一个类似的问题：我尝试过这个，但它不起作用。同样的问题：超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环