reactjs - 限制导航以防止浏览器在 React App 中挂起
问题描述
我正在 React 中进行登录/注册,我正在使用 firebase auth 进行身份验证。当用户登录时,我想在根路径或 App 组件上重定向用户。但是我进入了一个无限循环,这给了我这个错误(限制导航以防止浏览器挂起。)
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的 useEfect 中:
如果熟悉 React 类生命周期方法,可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
您的无限循环是因为您当前还使用 useEfect 作为 componentDidUpdate,只需在 useEfect 末尾添加 [ ] ,这将导致 useEfect 充当 componentDidMount。
useEffect(() => {
firebase.auth().onAuthStateChanged(user => {
if (user) {
props.history.push("/");
}
});
}, []);
推荐阅读
- python - 参数中的Python binance非法字符
- linux - 来自管道和 wc -m 的 bash 脚本输入
- pdf - PDF 未在 GitHub 上正确显示
- node.js - Implementing load protection for Fastify Node js
- dax - Power BI如何根据当前材料计算
- cors - 在 NestJs 中是否可以为单个路由启用 CORS?
- c# - 搜索文件内的文本
- node.js - 无法读取 Nodejs 中未定义的属性“拆分”
- python - 无法使用特定的 cron 计划通过 lambda 过程连接到 redshift
- javascript - 在地图上绘图并计算图钉角度 js