小能豆

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

javascript

使用 React Router 我已经完成了这个更新 URL:

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

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

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


阅读 44

收藏
2024-06-07

共1个答案

小能豆

无法使用 React Router 找到解决方案,但可以通过调用浏览器的历史记录界面来实现:

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

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

React Router 并不history.replace总是能正常工作

React Router 的history.replace方法可能会也可能不会触发重新渲染,具体取决于您应用的路由设置(例如,您有一个 catch-all/*路由)。根据定义,它不会阻止渲染。

2024-06-07