Reactjs 限制导航以防止浏览器挂起在React应用程序中
我正在从React中进行登录/注册,并使用firebase auth进行身份验证。当用户登录时,我希望在根路径或应用程序组件上重定向用户。但我进入了一个无限循环,这给了我一个错误:限制导航以防止浏览器挂起Reactjs 限制导航以防止浏览器挂起在React应用程序中,reactjs,firebase-authentication,react-router,react-hooks,Reactjs,Firebase Authentication,React Router,React Hooks,我正在从React中进行登录/注册,并使用firebase auth进行身份验证。当用户登录时,我希望在根路径或应用程序组件上重定向用户。但我进入了一个无限循环,这给了我一个错误:限制导航以防止浏览器挂起 import React, { useEffect } from "react"; import ReactDOM from "react-dom"; import "semantic-ui-css/semantic.min.css"; import App f
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")
);
您的问题正在使用中,请访问: 如果您熟悉React类生命周期方法,您可以 将效果挂钩用作componentDidMount、componentDidUpdate和 组件将联合卸载 您的无限循环是因为您当前也将UseFect用作componentDidUpdate,只需在UseFect末尾添加[],这将导致UseFect充当componentDidMount
useEffect(() => {
firebase.auth().onAuthStateChanged(user => {
if (user) {
props.history.push("/");
}
});
}, []);
我忘了把它放在那里,但最后,它对我有用。多谢各位