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

Question

使用 React 路由器，我已经完成了更新 url：

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

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

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

原文由 strangeQuirks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

React Router 的 history.replace 并不总是有效

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

原文由 Adrian Maseda 发布，翻译遵循 CC BY-SA 4.0 许可协议