Регулирование навигации для предотвращения зависания браузера в приложении React - PullRequest
Новая
       32

Регулирование навигации для предотвращения зависания браузера в приложении React

1 голос
/ 19 июня 2019

Я работаю над входом / регистрацией в React и использую аутентификацию firebase для аутентификации. Когда пользователь вошел в систему, я хочу перенаправить пользователя на корневой путь или на компонент приложения. Но я попал в бесконечный цикл, который выдает мне эту ошибку (регулировка навигации для предотвращения зависания браузера). 

    import React, { useEffect } from "react";
    import ReactDOM from "react-dom";
    import "semantic-ui-css/semantic.min.css";
    import App from "./App";
    import firebase from "firebase";
    import { BrowserRouter, Switch, Route, withRouter } from "react- 
router-dom";
    import Login from "./components/Login";
    import Register from "./components/Register";

    const Root = props => {
      useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
          if (user) {
            props.history.push("/");
          }
        });
      });
      return (
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
        </Switch>
      );
    };

    const RootWithAuth = withRouter(Root);

    ReactDOM.render(
      <BrowserRouter>
        <RootWithAuth />{" "}
      </BrowserRouter>,
      document.getElementById("root")
    );

1 Ответ

2 голосов
/ 19 июня 2019

Ваша проблема в использовании useEfect, из React :

Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffect Hook как componentDidMount, componentDidUpdate иcomponentWillUnmount комбинированный.

ваш бесконечный цикл состоит в том, что вы используете в настоящее время useEfect также в качестве componentDidUpdate, просто добавьте [] в конце useEfect, что приведет к тому, что useEfect будет действовать как componentDidMount. 

useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
          if (user) {
            props.history.push("/");
          }
        });
      }, []);
...