React router history.push in useEffect，两次渲染
React Router是一个用于构建单页应用的库，它提供了一种在React应用中进行路由管理的方式。而React Router中的history对象是用于管理浏览器历史记录的工具。
在React中，可以使用useEffect钩子来执行副作用操作，比如发送网络请求、订阅事件等。当使用history.push方法进行页面跳转时，如果将其放在useEffect中，可能会导致两次渲染的问题。
这是因为useEffect的执行时机是在组件渲染完成后，即在组件的render方法执行完毕后执行。而history.push方法会触发页面跳转，导致组件重新渲染。因此，如果将history.push放在useEffect中，会导致第一次渲染后执行useEffect，然后再次渲染组件，从而导致两次渲染。
为了解决这个问题，可以使用useLayoutEffect钩子代替useEffect。useLayoutEffect与useEffect类似，但它会在DOM更新之后同步执行，而不是在浏览器绘制之前异步执行。这样可以确保在页面跳转之前执行history.push方法，避免两次渲染的问题。
以下是一个示例代码：
import React, { useLayoutEffect } from 'react';
import { useHistory } from 'react-router-dom';
const MyComponent = () => {
const history = useHistory();
useLayoutEffect(() => {
history.push('/new-route');
}, []);
return (
<div>
{/* 组件内容 */}
</div>
);
};
export default MyComponent;在上面的代码中，useLayoutEffect钩子被用来执行history.push方法。由于传递了一个空的依赖数组，useLayoutEffect只会在组件挂载时执行一次，避免了多次渲染的问题。
需要注意的是，useLayoutEffect的执行时机可能会比较早，可能会在组件的render方法之前执行。因此，在使用useLayoutEffect时，需要确保相关的依赖项已经准备好，以避免出现意外的错误。
此外，如果你想了解更多关于React Router的信息，可以参考腾讯云提供的相关文档和产品：
- React Router官方文档：https://reactrouter.com/
- 腾讯云Serverless Framework：https://cloud.tencent.com/product/sls
- 腾讯云云函数SCF：https://cloud.tencent.com/product/scf
- 腾讯云API网关：https://cloud.tencent.com/product/apigateway
- 腾讯云COS对象存储：https://cloud.tencent.com/product/cos
- 腾讯云数据库TencentDB：https://cloud.tencent.com/product/cdb
- 腾讯云容器服务TKE：https://cloud.tencent.com/product/tke
- 腾讯云人工智能AI：https://cloud.tencent.com/product/ai
- 腾讯云物联网IoT Hub：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云区块链：https://cloud.tencent.com/product/bc
- 腾讯云元宇宙：https://cloud.tencent.com/product/metauniverse
以上是对React Router history.push在useEffect中两次渲染的问题的解释和解决方案，以及相关的腾讯云产品推荐。
相关·内容
我在两个组件上使用useHistory和useLocation。当使用字符串传递history.push上的数据时，"test“状态将是"test”。但是，如果我通过了“测试”状态，就会变得没有定义。而且，useEffect运行了两次，我不明白为什么。我让它指向搜索。
第一组件
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
const history = useHistory();
co
浏览 6提问于2022-11-17得票数 0
我是一个新的反应，我似乎有鸡和蛋的问题。我希望浏览器URL中的查询参数与页面中的useState变量同步。我的问题是，当我让useEffect做一个history.push，然后react更新变量，这会触发另一个history.push，无限递归就会发生。这是我尝试的变通方法，但我必须有重复的代码。一个副本在useEffect内，另一个副本在useEffect外，所以我可以使用它，而不会触发无限递归。 我以为我读到我可以memoize一些东西，但我不确定。我怎样才能避免重复的代码？ import {useState, useEffect} from "react";
impo
浏览 25提问于2021-04-23得票数 0
回答已采纳
当我登录和退出时有问题。单击“登录”时，它将正确设置cookie，但地址不会更新。因此，我需要手动更新地址以使其正常工作。当我单击“注销”时，它将正确删除cookie并正确更新地址，但它将显示一个空白页。所以我需要刷新页面才能正常工作。我做错了什么？
下面是我的一段代码：
App.js
import React, { useEffect } from 'react';
import {
Route, Switch, useHistory,
} from 'react-router-dom';
export default function App() {
浏览 1提问于2021-05-23得票数 1
在下面的代码中，我得到了标题中的错误，如何修复它？
任何帮助都很感谢！
import { useHistory } from "react-router-dom";
let history = useHistory();
history.push({
pathname: '/otherPage',
state: { detail: id }
});
//otherPage
import React, { useEffect } from 'react';
import { useLocatio
浏览 0提问于2020-03-30得票数 1
回答已采纳
我使用一个带有useEffect钩子的React useEffect在我的最外层组件中设置一个变量，这个组件包装了我的整个应用程序。在我的应用程序中的一个子组件上，我使用history.push('/')路由回根。这使得而不是似乎触发了对我的上下文变量的更新。这是意料之中吗？如果是的话，是否有更好的路由方式来更新我的上下文变量？
我正在使用react 16.14.0 & react-router-dom 5.2.0。
例如，下面的代码。不应该在var上增加history.push('/')
Context.js
const Context= React.
浏览 3提问于2021-03-30得票数 1
回答已采纳
我使用的是react-storage-hooks，它提供了一种使用localStorage创建全局状态的方法。在内部，似乎要等到下一次使用useEffect呈现时才调用setValue函数。这是一个问题，因为我想设置这个本地存储值，并立即使用react-router-dom以编程方式导航到不同的页面。 下面是一个简化的例子 import React from 'react';
import { useHistory } from 'react-router-dom';
import { useStorageState } from 'react-sto
浏览 7提问于2020-04-29得票数 0
回答已采纳
问题描述
我使用的反应-路由器-多姆与反应功能组件。我试图用"history.push“传递数据，这是不起作用的。
重定向到"history.push“本身的另一个页面的效果很好。但问题是：通过"state：{.}“将数据传递给组件时，当我试图使用组件中的"props.location.state”访问它时，“无法读取未定义的属性‘状态”。
我尝试过不同的路线定义。
代码
app.js
import React from 'react';
import PageList from './pages/PageList';
impor
浏览 5提问于2019-10-30得票数 2
主要错误是useEffect函数中的抛出错误。
我通过遵循yt - 创建了一个web聊天应用程序。
查看源(错误为)
353 | Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
354 | _firebase__WEBPACK_IMPORTED_MODULE_2__["auth"].onAuthStateChanged(user => {
355 | setUser(user);
> 356 | setLoading(false);
浏览 4提问于2021-11-15得票数 0
当用户重新加载或引用当前页面时，我想将用户重定向到菜单页面。
Menu.js：
import React from "react";
import { useHistory } from "react-router-dom";
export default function Menu() {
const history = useHistory();
const handleClick = () => {
history.push("/myComponent");
};
return (
<div&g
浏览 138提问于2021-02-18得票数 1
回答已采纳
当我通过历史的push方法更改路由时，没有重新渲染。
转到。
通过使用history.push方法
我不能把实际的，但部分它看起来像这样。index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router-dom';
import history from './common/Creat
浏览 0提问于2019-11-26得票数 0
1回答
我有下面介绍的组件。我在单元测试方面完全是新手。有人能给我一些建议吗?我应该如何测试这个组件，以及应该测试什么？我试图浅层渲染它，以检查h2中的文本是否存在，但我仍然收到错误。
import React, { useEffect } from 'react';
import { Form, Field } from 'react-final-form';
import { useHistory, Link } from 'react-router-dom';
import { useDispatch, useSelector } from
浏览 0提问于2020-04-29得票数 0
我曾尝试将一个函数分离到另一个文件，并在useEffect()中调用它。这是我的代码。 ReadCookie.js
import React, {useContext} from 'react'
import { AuthContext } from '../App';
import Cookies from 'js-cookie';
import { useHistory } from 'react-router-dom';
export const ReadCookie = () => {
const {s
浏览 34提问于2020-09-07得票数 0
在任何地方都找不到有关此问题的文档。这会导致useEffect再次运行吗？我不想让它获取两次，这会在我的代码中引起一些问题。
import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom'
const myComponent = () => {
const { push } = useHistory();
useEffect( () => {
console.log(" THIS SHOULD RUN ONLY O
浏览 0提问于2020-08-07得票数 7
1回答
使用useEffect return删除addEventListener时出现问题我还尝试将空数组作为第二个参数添加到useEffect，但侦听器仍然存在 import React, { useCallback, useEffect } from "react";
import headerLogo from "./icons/logo.svg";
import { useHistory } from "react-router-dom";
function Home({ header }) {
const history = useHi
浏览 33提问于2021-08-04得票数 0
1回答
每次我执行history.push("/path")时，url都会更改为正确的路径，但是404URL组件会被渲染。 // indes.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
import history from "./customHistory";
import {Router} from "react-router";
ReactDOM.render
浏览 46提问于2020-10-31得票数 1
回答已采纳
我是在第17.x和反应-路由器-多玛5.2.登录后，即使我做了history.push('/)，它也不会导航到/。但是URL在地址栏中是正确更新的。
App.js:
import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";
import Login from './pages/Login';
import Dashboard f
浏览 5提问于2021-04-06得票数 0
我试图创建一个使用电子邮件和密码使用Firebase的身份验证网站。我甚至不能加载登录页面。
这里是Auth.js
import React, { useState, useEffect} from "react";
import { auth } from './config'
import { onAuthStateChanged } from "firebase/auth";
export const AuthContext = React.createContext();
export const AuthProvider = ({
浏览 1提问于2021-09-14得票数 0
在我的App.js中，有许多组件包装在来自react-router-dom的Switch组件中
App.js
import React from "react";
import Loadable from "react-loadable";
import { Switch } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
const Test = Loadable({
loader: () => import(".
浏览 6提问于2022-07-25得票数 1
我已经使用firebase\react进行了login\Signup auth，如果登录或注册是正确的，我会尝试将用户定向到下一个页面。但我一直收到上面的错误' error :TypeError: Cannot read property 'push‘of undefined’。我猜在哪里以及如何调用history.push是有问题的。有没有人能提供一个快速解决方案？下面是我的部分代码。 App.js import React, { useEffect, useState } from "react";
import "./App.css";
浏览 32提问于2021-04-30得票数 0
回答已采纳
在这段代码中，我根据用户登录的条件使用 (如果用户信息存储在本地存储中)，除了登录组件外，我正在呈现navbar组件。但是在成功登录之后，在各自的组件中，在第一次路由时，它不是显示在顶部的导航栏，而是只显示在我刷新页面时。组件在下面。谢谢Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from
浏览 3提问于2021-08-09得票数 0
1回答
在设置令牌之后，我尝试使用history.push()。不知何故，页面不会重定向到新的路径。我使用useHistory特性访问历史记录。一旦我重新加载页面，它就会重定向到家。我试过其他类型的黑客，但无法找到解决办法。请帮帮忙。
App.js
function App() {
const [isAuthenticated, setAuthenticated] = useState(false);
useEffect(()=>{
if(cookie.get('authorization')){
setAuthenticated(true);
浏览 3提问于2020-11-29得票数 0
回答已采纳
我有这个代码： import {useContext, useEffect, useState} from 'react';
import {useHistory} from "react-router-dom";
import {MasterContext} from "../../Context/MasterProvider";
import LoginActions from "../../Context/Actions/LoginActions";
const useLoginForm = () => {
浏览 27提问于2020-12-19得票数 0
回答已采纳
我有以下react组件
import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
function ScrollToTop({ history }) {
useEffect(() => {
const unlisten = history.listen(() => {
window.scrollTo(0, 0);
});
return () => {
unlisten();
}
浏览 0提问于2020-11-26得票数 0
1回答
我有一个简单的问题，关于在不重新呈现整个页面的情况下重新呈现一个功能性的react组件。
在几个帖子中，人们在谈论：
库:REACT路由器-DOM
history.push("/");
history.goBack();
实际上，它重新呈现了我的组件，负责在DOM中加载数据的useEffect钩子运行良好，但是在两次重新呈现之后，我在控制台中得到了一个错误：
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory
浏览 2提问于2020-10-05得票数 1
回答已采纳
我正在使用"react-router": "^5.2.1"和"react-router-dom": "^5.3.0"，当我使用history.push()时，我可以看到浏览器更改了URL，但它不会呈现在路径上侦听的组件。只有当我刷新页面时它才会呈现。当我使用history.push试图在用户单击按钮时重定向用户时，在单个页面中也会发生这种情况。任何关于我所做的wring的建议/建议都将不胜感激。 我已经尝试过用withRouter()包装我的应用程序导出，但没有任何变化。我还在<Switch>中包装了我的路由 我也在
浏览 12提问于2021-10-16得票数 2
我使用的是react路由器-dom版本6.3.0。我正在获得未定义的TypeError:无法读取未定义(读取‘历史’)错误的属性。我尝试了很多方法之后，也得到了同样的错误，请帮助我.这是Search.js文件，当我搜索特定的项目时，我会收到错误，而且url不会改变它的原样。
import React, { useState, Fragment } from "react";
import MetaData from "../layout/MetaData";
import "./Search.css";
const Search = ({ hi
浏览 3提问于2022-07-22得票数 0
回答已采纳
我希望有一个AI语音助理Alan被整合到我的react应用程序中
因此，基本上想要使用语音命令重定向页面。
但问题是，我想使用useHistory钩子的push方法来更改页面，但是每当我访问变量(它是未定义的)时，我就不想使用window.location.href，因为它每次刷新应用程序，
有人能告诉我我哪里错了吗?用这个钩子或者其他的方法？
import { useCallback, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
impo
浏览 2提问于2021-02-17得票数 4
回答已采纳
在React组件中，按钮提交接受页面上的文本字段的值，并将它们传递到mockFetch。然后，如果mockFetch的承诺成功，它会触发一个history.push('/newaccount')。
我将测试设置为单击该按钮，然后尝试使用传入的内容来检测history.push('/newaccount')调用，但我的模拟history.push没有被调用。有没有人知道我能做些什么让这个测试通过？
编辑:结果是将当前的jest.mock替换为：
const history = createMemoryHistory();
const pushSpy
浏览 0提问于2021-02-10得票数 2
1回答
我正在尝试做一个登录页面，我在某种程度上是成功的。下面是我的登录组件：
import React, { useState, useEffect } from "react";
import Axios from "axios";
import useForm from "../components/LoginForm/useForm";
import validate from "components/LoginForm/validate";
import redtruck from "../assets/img/
浏览 2提问于2021-07-08得票数 0
1回答
所以这里我有搜索功能。除了在数组中找不到项之外，一切都很正常。我用objects.Keys尝试了一些东西，但它在渲染上显示它，而不是当书没有被找到的时候。我应该使用if语句还是。 import React,{useState, useEffect, useRef, useContext}from 'react'
import {FaSearch} from 'react-icons/fa'
import {
Link, useHistory
} from "react-router-dom";
import { BookConte
浏览 16提问于2021-04-05得票数 0
回答已采纳
我正在尝试history.push，但它总是不确定。
import React, { useEffect, useState } from "react";
import * as Firebase from "firebase/app";
import "firebase/auth";
import DBAPI from "./database/database-api"
import DBName from "./database/database-name"
import { useHistory } fro
浏览 2提问于2020-06-06得票数 0
每当用户使用react路由器-dom和Firebase访问页面时，我希望计数视图，我有以下代码：
//useHistory is the react-router-dom dependency
const history = useHistory();
const handleClick = () => history.push('/post');
if(handleClick) {
db.collection("posts").doc(postId).update({
views: increment,
})
}
它的工作原理，但它
浏览 2提问于2021-11-11得票数 2
回答已采纳
我尝试将react- router -dom与useEffect结合使用，登录后尝试更改路由器，以下是我的代码 const Member = () => {
let history = useHistory();
useEffect(()=>{
if(!signInStatus.current){
return
}
signIn(sign_data) //async fetch api
.then(response=>{
if(response.status!==200){
浏览 37提问于2021-07-09得票数 0
回答已采纳
我的React组件之一就是行为不端。在某种意义上，当状态设置为true时，它呈现错误的HTML代码 import React, { useState, useEffect } from "react";
import { Redirect } from "react-router-dom";
import Brand from "./Brand";
import Navbar from "./Navbar";
import axios from "axios";
const EmailConfirmed = (
浏览 24提问于2021-02-07得票数 0
回答已采纳
我有以下代码： function checklogin(callback) {
if (!state.user.authenticated)
pushhistory("/accounts/login", function(){teamhome2_message();});
else
callback();
}
// ATTEMPTED HOOK VERSION
function useLogin(state, url, loginMessage) {
const history = useHistory();
if (!state.us
浏览 18提问于2021-06-16得票数 0
回答已采纳
我试图在useHistory钩子中使用react.js，我不明白为什么会出现错误无法响应未定义的属性推送。
代码：
import { useHistory } from "react-router-dom";
function App() {
const [loader, setLoader] = useState(false);
const [errMsg, setErrMsg] = useState("");
const [signinLoader, setsinginLoader] = useState(false);
const [opt
浏览 2提问于2021-08-16得票数 1
回答已采纳
1回答
我一直在用React构建一个QR扫描应用程序，它会扫描一个代码，并在2秒后将用户重定向到QR编码的URL。它工作得很好。 虽然在QR扫描之后，我在前面渲染了解码后的值，但在此之后，如果我将手机从摄像头移开，该值将消失，因为状态已更改，因此React会重新渲染我的组件。我希望即使在我移动手机后，这个URL仍然是已解码的URL。 下面是我的代码： QrScanner.js
import { useHistory } from "react-router-dom";
import BarcodeScannerComponent from "react-qr-barcode-
浏览 37提问于2021-08-11得票数 0
我正在使用react路由器v6，每次我在我的主文件中使用初始化进行身份验证时，它都会显示此错误。我在互联网上找不到解决方案。我想只在有用户的时候渲染一些路由，但现在它不渲染任何东西。
AuthNavigator
import React, { useState, useEffect } from 'react';
import app from './firebase';
import { Router, Routes, Route } from 'react-router-dom';
import AuthStack from './
浏览 2提问于2021-03-22得票数 2
我有两个用户(用户和管理)在我的反应项目，我想重定向他们的尊重的页面后，成功登录。为了实现这一点，我创建了一个名为authenticatedRoute.js的独立组件，并通过AuthenticatedRoute组件包装这些组件。这是密码
AuthenticatedRoute.js
import { useHistory } from "react-router-dom";
import { Route } from "react-router-dom";
const AuthenticatedRoute = ({ children, ...rest }) =&
浏览 1提问于2022-04-05得票数 1
回答已采纳
2回答
我正在使用react-redux，目前我的全局状态中有一个bool isAuthenticated属性，如果是这样的话，它将重定向到/home组件。
是否有更好的方法来解决我所实现的方法？如何解决输出错误？
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login } from "./actions";
import { useHistory } from "react-r
浏览 1提问于2020-08-26得票数 0
回答已采纳
App.js
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Home from './components/Home';
import Navbar from './components/Navbar';
import Game from './components/Game'
import {useState, useEffect} from 'react'
function App() {
co
浏览 3提问于2021-07-30得票数 0
回答已采纳
2回答
我正在尝试从在我的新项目中使用redux到使用钩子。我的理解是，我可以使用自定义钩子(如这个钩子)从各个组件加载它来访问相同的状态，类似于redux允许我访问状态的方式。
import { useState } from 'react';
export const useSelectedStore = () => {
const [selectedStore, setSelectedStore] = useState();
return [
selectedStore,
setSelectedStore,
];
};
我遇到的问题是，我有一
浏览 0提问于2020-05-13得票数 0
回答已采纳
我的主要目的是重写Switch组件，然后通过显示实现组件的缓存，而不是每次都销毁它。
// App
const App = () => {
return (
<MySwitch>
<Route path="path1" component={<Component1>}>
<Route path="path2" component={<Component2>}>
</MySwitch>
)
}
// MySwitch
const cache
浏览 29提问于2021-05-15得票数 0
回答已采纳
我有一个功能，希望它可以替换Header和Footer组件之间的组件。
我应该在哪里/如何与defaultRouter一起使用history.push函数。我看到只更改了。
Header组件正在更新pageIndex。
我试图将defaultRouter更改为useCallback函数，但这根本行不通。
这些功能的顺序是什么？App.js
function App() {
const [searchResults, setSearchResults] = useState([]);
const [itemsAmount, setItemsAmount] = useState('
浏览 3提问于2021-07-11得票数 0
回答已采纳
我对此反应很新，第一次尝试通过将导航推到历史上来实现对新页面的导航，但是现在在错误Cannot read property 'push' of undefined for react use history上停留了几个小时，并认为我需要一些帮助或指导。
下面是我的mvp组件(我正在使用钩子)：
import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useHistory} from "react-router-dom
浏览 4提问于2020-09-06得票数 2
回答已采纳
1回答
为了简单起见，我只写了一小段代码，以便专注于问题。我有一个组件，它有一个对话框，这是一个商业流程的一部分，您可以填写一些信息，如注释，您可以批准或不批准销售。 import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const Modal = ({
closeModal,
open
}) => {
const [note, setNote] = useState('')
cons
浏览 16提问于2020-07-21得票数 0
我想处理行为时，登录用户将尝试访问登录/注册/任何相关的视图，重定向这样的请求到主页，使用反应挂钩。在我的登录表单组件上，我尝试过这样的方法：
useEffect(() => {
if (isAuthenticated) history.push("/dashboard");
}, [isAuthenticated, history]);
但是每次登录用户点击登录，他/她看到登录表单一瞥和眼睛，我想防止它。作为一种解决办法，我使用了NotLoggedRoute，它模仿PrivateRoute行为，但我不确定这是否是以这种方式处理它的最佳方法：
impor
浏览 1提问于2020-04-03得票数 1
回答已采纳
我正在开发一个应用程序，其中我使用Firebase作为应用程序的身份验证系统，当我尝试实现应用程序的路由时，我开始收到上面的标题错误。 我使用withRouter函数来封装我的应用程序组件。 因此，我的App.tsx文件的代码如下： import React, { FC, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
Route,
Switch,
useHistory,
withRouter,
Browse
浏览 37提问于2021-09-12得票数 3
回答已采纳
因此，我创建了一个加载器组件，它向服务器请求数据，然后基于响应-然后加载器页面将它们重定向/重新路由到其他页面。
但由于某些原因，history.push更改了路由，但不呈现组件，而是保留<LoaderPage>组件。不知道我错过了什么。所以请多多关照。
我已经用<LoaderPage>组件包装了所有页面，因为我的目标是每次用户访问任何路由时，<LoaderPage>组件首先呈现，然后执行其工作，然后将用户重定向/重路由到其他页面。
loader.tsx
import React from 'react';
import { useHisto
浏览 2提问于2020-02-14得票数 0
我使用Okta对我的React web应用程序进行了身份验证，但是，如果用户未通过身份验证或令牌过期，它会将用户重定向到/login页面。
Page1.js：
import React, { useState, useEffect } from "react";
import { useOktaAuth } from "@okta/okta-react";
import { Redirect, useHistory } from "react-router-dom";
const { authState } = useOktaAuth();
c
浏览 4提问于2021-07-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
