时间戳

首页 > 解决方案 > React 路由器导航到特定路由而无需再次推送

reactjs - React 路由器导航到特定路由而无需再次推送

问题描述

我有一个有 6-7 条路线的网络应用程序。用户按以下顺序查看屏幕：

  1. 家
  2. 球员名单
  3. 输入一个数字
  4. 游戏画面
  5. 输赢的游戏结束画面

在屏幕 5之后，我想再次显示屏幕 3进行播放。所以我不再需要“游戏画面”和“游戏结束画面”并将它们从历史中清除并返回到画面 3。

我正在使用<MemoryRouter>组件来防止 url 更改并使用自定义“返回”按钮返回。我实际上想知道是否可以手动更改路由堆栈（删除其中一些等）。或者我应该使用哪种方法？顺便说一句，我尝试了所有这些。

我在console.log(history)这里分享一个

{length: 6, action: "PUSH", location: {…}, index: 5, entries: Array(6), …}
length: 7
action: "PUSH"
location: {pathname: "/gamescreen", search: "", hash: "", state: undefined, key: "pwi569"}
index: 6
entries: Array(7)
0: {pathname: "/", search: "", hash: "", state: undefined, key: "8zl7xq"}
1: {pathname: "/playerlist", search: "", hash: "", state: undefined, key: "ximj74"}
2: {pathname: "/enteryournumber", search: "", hash: "", state: undefined, key: "hxx63i"}
3: {pathname: "/gamescreen", search: "", hash: "", state: undefined, key: "s601nx"}
4: {pathname: "/modalgameend", state: {…}, search: "", hash: "", key: "i8chfy"}
5: {pathname: "/enteryournumber", search: "", hash: "", state: undefined, key: "ozqjyr"}
6: {pathname: "/gamescreen", search: "", hash: "", state: undefined, key: "pwi569"}
length: 7
__proto__: Array(0)
createHref: ƒ createPath(location)
push: ƒ push(path, state)
replace: ƒ replace(path, state)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
canGo: ƒ canGo(n)
block: ƒ block(prompt)
listen: ƒ listen(listener)

标签： reactjsreact-router

解决方案

您需要使用以下内容从历史堆栈中删除以前的条目。

this.props.history.replace("/enteryournumber");

希望这对你有用。

推荐阅读