React-Router 在按下后退按钮时跳过搜索查询答案

【问题标题】：React-Router skip search queries on back button pressReact-Router 在按下后退按钮时跳过搜索查询
【发布时间】：2018-06-24 07:55:49
【问题描述】：

在搜索页面中，我使用了搜索查询。我想跳过搜索查询中的更改并返回真正的上一页。

现在：

/page1 -> /page2 -> /page2?id=1 -> /page2?id=1&order=max -(back)-> /page2?id=1 -(back)-> /page2? -(后退)-> /page1

我想要什么：

/page1 -> /page2 -> /page2?id=1 -> /page2?id=1&order=max -(back)-> /page1

【问题讨论】：

【解决方案1】：

您要跳过的页面只需使用 replace 进行导航，而不是使用 push 进行导航。

假设你的历史堆栈是

/page1 推送另一个页面 /第2页推送另一个页面 /page3 那么page3上只有一个查询变化，你想在pop时回到page2。

所以只需将 /page3/ 替换为 /page3?q=test

所以现在历史堆栈将是

/page1

/page2

/page3?q=test

【讨论】：

【解决方案2】：

在查询参数更改时，您可以使用 history.replace 代替 history.push。因此，您在该场景中的 URL 更改不会被推送到历史堆栈中。

this.props.history.replace(`${URL_TO_BE}${QUERY_STRING}`)
// this.props.history.push(`${URL_TO_BE}${QUERY_STRING}`)

【讨论】：