React-Router在按下返回按钮时跳过搜索查询

Question

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

现在：

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

我想要的是：

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

- alireza

---

你可以尝试使用 https://www.npmjs.com/package/url，创建一个具有不同 pathname 但相同查询字符串的 URL。 - Daniel Krom

@DanielKrom 我想回到 react-router 的历史版本，而不是跳转到另一个页面。我只想跳过查询更改。 - alireza

Answer 1

如果你想跳过某些页面，只需使用replace进行导航，而不是对它们进行push。

假设你的历史堆栈如下：

/page1 推入另一页 /page2 推入另一页 /page3 然后在page3上只有一个查询更改，并且你希望在弹出时返回到page2。

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

现在历史堆栈将变为：

/page1

/page2

/page3?q=test

- Muhammad Danial Iqbal

Answer 2

在查询参数发生变化时，您可以使用 history.replace 而不是 history.push。因此，在这种情况下，您的 URL 更改不会被推送到历史记录栈中。

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

- Rusty