反应路由器导航到特定路由,而无需再次推送

时间:2020-01-19 20:24:04

标签: reactjs react-router

我有一个拥有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)

1 个答案:

答案 0 :(得分:0)

“输赢者游戏结束”屏幕中将显示“考虑再次玩游戏”按钮。

在该按钮上写一个onClick事件以编程方式重定向。

playAgain() {
   return <Redirect to='/enteryournumber' />
}

希望这会有所帮助。