React-router:更改 URL 并清除历史记录

IT技术 reactjs react-router
2021-05-17 20:17:39

我有以下场景:

用户打开激活链接;用户完成激活过程后,系统会将其移至另一个页面。
我不想在浏览器的历史记录中保留激活链接,因为当用户返回时,他们将再次进入激活步骤。

如何替换浏览器的历史记录以从我的应用程序中删除某些请求?

4个回答

ReactJs您应该browserHistory为此目的使用这会处理您的历史记录,您无需自己实现这些功能。

browserHistory 有 2 个方法push()replace()它们的功能与 @fazal 在他的回答中提到的功能相同,但方式更好。

所以如果你想避免用户回到以前的状态,你需要使用 browserHistory().replace

首先将其导入到您的代码中:

import {browserHistory} from 'react-router'

用户激活后,您可以执行以下操作:-

browserHistory.replace(//your new link)

我知道这是旧的,但我有一个类似的问题,其他答案都不是 100% 适用于我的版本,或者React这应该通过清除附加路径在更新的版本中工作。

   
  //replace(path, state)
  this.props.history.replace("/home", "urlhistory");

HTML5 历史 API 提供了两种方法来Adding and modifying history entries.

pushState(): 后退状态保留 replaceState(): 无后退状态

假设您正在使用react-router. 所以,在你的组件上使用

this.props.history.replaceState('your new state')

阅读更多:操纵浏览器历史记录

视频:REACT JS 教程 #6 - React 路由器和使用 React JS 的单页应用程序介绍

在你想改变路线的地方运行这个块

history.entries = [];
history.index = -1;
history.push(`/route`);

这将清除历史并更改为新的。