react-router：如何在不导致导航/重新加载的情况下更新 url？

Question

使用反应路由器我已经完成了更新网址：

this.props.history.push({
            pathname: `/product/${this.props.product.id}`,
        });

但是，这会导致重新渲染/导航更改。有没有办法在不这样做的情况下更新网址？

我的用例是我有一个产品列表，当我点击一个产品列表时，我会显示一个模态并希望将 url 更新为 example.com/product/1 之类的内容，以便链接可以共享。

Answer 1

无法使用 React Router 找到解决方案，但可以通过调用浏览器的历史记录界面来完成此操作：

window.history.replaceState(null, "New Page Title", "/pathname/goes/here")

您可以.replaceState 在此处了解更多信息。

React Routerhistory.replace并不总是有效

React Router 的history.replace方法可能会也可能不会触发重新渲染，具体取决于您的应用程序的路由设置（例如，您有一个包罗万象的/*路由）。它不会根据定义阻止渲染。

Answer 2

替换将覆盖 URL

this.props.history.replace({ pathname: `/product/${this.props.product.id}`})