限制导航以防止浏览器挂在 React App 中

Question

我正在 React 中进行登录/注册，并使用 firebase auth 进行身份验证。当用户登录时，我想在根路径或应用程序组件上重定向用户。但我陷入了无限循环，这给了我这个错误（限制导航以防止浏览器挂起。）

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

Answer 1

你的问题是来自React的 useEfect ：

\n\n

\n

如果您熟悉 React 类生命周期方法，您可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

\n

\n\n

您的无限循环是因为您当前也使用 useEfect 作为 componentDidUpdate，只需在 useEfect 末尾添加 [ ] ，这将导致 useEfect 充当 componentDidMount 。

\n\n

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

\n