使用react-router-dom更改url时，历史记录不会更新
在React应用中使用react-router-dom库进行路由管理时，如果通过编程方式更改URL，会导致历史记录不会自动更新。这是因为react-router-dom库的设计理念是单页面应用（SPA），使用浏览器的history API来模拟导航并更新URL，但不会触发浏览器的实际页面刷新或历史记录更新。
要解决这个问题，可以使用history对象中的push方法来手动添加新的历史记录，从而使历史记录得到更新。下面是一种解决方案：
- 首先，确保你的组件中已经引入了
react-router-dom库和相关的依赖。
import { useHistory } from 'react-router-dom';- 在组件内部获取
history对象。
const history = useHistory();- 当需要更改URL时，使用
history.push方法。
history.push('/new-url');通过调用history.push方法，你可以将新的URL添加到历史记录中，这将使浏览器的URL发生变化，并且历史记录也会被更新。
对于react-router-dom库的使用，你可以参考腾讯云的产品文档中关于云服务器、云数据库 MySQL、云存储等相关产品介绍。同时，腾讯云也提供了React等开发语言的支持，以便更好地进行云计算相关的开发工作。
相关·内容
所以问题是，当我试图使用浏览器原生back，以及history.back(), history.push()和history.replace()按钮返回时，它把我带到了错误的路径，所以我没有转到以前的页面为了浏览页面，我使用了useHistory钩子。
浏览 11提问于2021-02-05得票数 0
1回答
我使用ajax调用来更新页面的一部分，这是用于搜索函数的。当我搜索的时候，我更新网址。例如: mysite.com/products变成mysite.com/products?search=blablafunction setHistory(data, url) {
var search = $("#
浏览 4提问于2014-05-08得票数 1
回答已采纳
1回答
我像这样导入历史：然后，我使用组件中的钩子“获取”历史记录，如下所示：在我的组件中，我修改了useEffect()函数中的url，如下所示：urlParams.append('number单击组件中的一个按钮后，我可以看到浏览器url从m
浏览 7提问于2021-06-08得票数 1
每当用户单击o按钮时，我希望使用自定义浏览器历史记录更改路由。但它隐藏了组件，而URL已更改import { Router, Route } from "react-router-dom"; returnsecond-step" exact component={SecondLogin} /> <
浏览 4提问于2021-03-12得票数 0
回答已采纳
我的app.jsx部件 BrowserRouter as Switch, Route,} from "react-router-domexact path="/login"> </Route> </div>}
当我访问/路径时<
浏览 15提问于2020-05-08得票数 0
回答已采纳
我遇到了一个问题，ConnectedRouter没有更新路由更改的历史记录。在路由更改存储中，获取更新的历史记录，而Router (ConnectedRouter的子级)获取更新的历史记录，但ConnectedRouter的历史记录保持不变。该应用程序不会呈现新的组件，但浏览器的url会发生变化。bindActionCreators } from 'redux'
import {
浏览 4提问于2017-05-21得票数 3
只要我使用BrowserRouter，我的路由就能正常工作。import { BrowserRouter as Router } from 'react-router-dom'export default history
import { Router } from 'react-ro
浏览 0提问于2020-11-12得票数 6
回答已采纳
基本上，当用户点击“我的个人资料”时，我想要重定向到用户的个人资料。为此，我使用以下代码片段 console.log('My USER ID: ', this.props.userId);在谷歌了一段时间后，我知道这是与redux有关...然而，我找不
浏览 4提问于2018-02-15得票数 2
我想在我的应用程序中使用错误边界，它使用react路由器，它显示导航到不同组件页面的链接。当我使用错误边界时，在组件页面中添加一次的自定义错误消息在其他组件页面中始终可用。当我导航到其他页面(URL)时，如何清除由错误边界创建的客户错误消息？
浏览 22提问于2018-03-05得票数 1
我正在根据用户正在使用的搜索过滤器更改我的一条路由的url。我的组件在每次更改后都会正确地重新呈现，并且我能够像这样检查我的url。the history obj on every rerender) console.log('rerender', history);
}); 但是，当我尝试只在历史记录更新时让它运行时，什么都不会发生 //doesn
浏览 39提问于2019-05-06得票数 2
回答已采纳
2回答
App.css'import { BrowserRouter as Router, Switch, Route } from 'react-router-dom/> </Suspense> </Router>}
export default
浏览 2提问于2020-02-03得票数 3
回答已采纳
在按下浏览器back button时，为什么会显示空页而不是我以前访问过的组件？只有URL被更改为前一个URL。真令人沮丧，我怎么才能解决这个问题呢？
浏览 3提问于2021-07-19得票数 1
回答已采纳
我有一个在webpack开发模式下运行良好的小应用程序，但是当我使用由生产模式生成的dist文件夹中的捆绑文件时，我在浏览器中得到的只有以下错误：
Uncaught DOMException: Failedto execute 'pushState' on 'History': A history state object with URL 'file:///C:/' cannot be createdin a document with o
浏览 0提问于2019-04-27得票数 16
回答已采纳
1回答
当我点击一个<Link>标签，在我的反应-本机文件，组件将改变如预期，但是网址没有得到更新，但仍然在基本的本地主机网址。如果我手动更改URL以搜索所需的路由，它不会更改组件，但URL将保留为我搜索的URL路径。当我保存文件并自动刷新浏览器时，URL不会更改，但EnterTheApp.js组件将再次呈现。
浏览 6提问于2022-05-18得票数 1
React应用程序使用历史库进行导航。forceRefresh: true App.jsimport { Router, Switch, Route } from 'react-router-dom/> <Router /> }我面临的问题是：
我在React的path ，我切换到Vu
浏览 2提问于2021-06-29得票数 1
1回答
我知道如何使用Mercurial来重命名文件。我了解到，hg log命令在重命名文件之前不会显示文件历史记录，除非使用-f选项，而且还可以强制显示文件历史记录，如“接受的答案”( )所述。但是，当我重命名一个文件，然后使用TortoiseHg检查文件历史记录时，我无法查看该文件的完整历史记录，包括重命名该文件之前的任何更改，即使我更新了~/..hgrc文件以包括上述链接中解释的这些<em
浏览 2提问于2014-08-12得票数 4
回答已采纳
我使用的是react-router-dom: v4.1.1，这是我的路由器代码：var Router =function () { }} /></div>在Home组件中，我有一个按钮，当单击该
浏览 0提问于2017-06-05得票数 0
我在SPA的React中工作，它不使用React路由器创建任何路由；我不需要允许用户导航到特定的页面。(考虑一下多页调查问卷，按顺序填写。)但是，当用户按下浏览器上的后退按钮时，我不希望他们退出整个应用程序；当用户按后退按钮时，我希望能够触发一个函数，该按钮只呈现页面，就像他们上次选择之前那样。使用(如果必要的话) React路由器(v5)、函数组件和类型记录的当前版本，我如何访问后退按钮事件来禁用它并用我自己的函数替换它？(我发现的其他答案要么是使用类组件、特定于Reactive路由器旧版本的函数，要么
浏览 3提问于2020-05-21得票数 4
1回答
Ajax导航/浏览器返回
、、、
我需要实现ajax导航而不需要任何页面重新加载，我正在将html写入ajax容器div。是否有任何解决方案来处理浏览器的后退和转发事件。还添加到书签吗？我需要涵盖所有浏览器，包括IE 8和更高版本。谢谢
浏览 1提问于2012-12-25得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
