Максимальная глубина обновления превышена с помощью this.props.history.push - PullRequest
0 голосов
/ 10 октября 2019

Я пытаюсь настроить маршрутизацию входа в систему для моего веб-приложения.

Идея такова:

  • Войти и зарегистрироваться

  • Если аутентификация отсутствует, она будет направлена ​​на /loginкоторый затем отобразит компонент Login. Если есть, я направлю на /dashboard

  • В Login, если пользователь введет правильное имя пользователя и пароль, он будет перенаправлен на /dashboard, иначе он ничего не сделаетмаршрутизация.
  • Если пользователь посещает / Если есть какая-либо аутентификация, пользователь перенаправит на /dashboard еще на /login

Я пытался использовать this.props.history.push для перенаправления между Login - DashBoard компонентами.

Вот мои маршруты пока, я не знаю, является ли это лучшей практикой. Если это не так, любая помощь будет полезна.

Routing.js:

...
   render() {
      return(
         <>
          <Route path="/login"><Login showAlert={this.showAlert}/></Route>
          <Route path="/register"><Register showAlert={this.showAlert}/></Route>

          <AuthRoute authed={AuthenticationService.isUserLoggedIn()} path="/">
             <Dashboard/>
          </AuthRoute>

          <AuthRoute authed={AuthenticationService.isUserLoggedIn()} path="/dashboard">
               <Dashboard/>
          </AuthRoute>
        </>
      )
...

Login.js:

...
    componentDidMount() {
        if(AuthenticationService.isUserLoggedIn()) {
            this.props.history.push('/dashboard');
        }
    }
...
    handleSubmit = (event) => {
        event.preventDefault();
        AuthenticationService.authenticateAccount(this.state.email, this.state.password)
            .then(() => {
                this.props.history.push('/dashboard')
            });
    }
...
export default withRouter(Login);

Однако, он имеет 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. хотя я использую componentDidMount()

enter image description here

Снова, любая помощь будет оценена.

Спасибо.

ОБНОВЛЕНИЕ : проблема возникает только после нажатия login из /login

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...