使用react-router我已经完成了更新网址：
this.props.history.push({
pathname: `/product/${this.props.product.id}`,
});
但是，这会导致重新渲染/导航更改。有没有办法在不这样做的情况下更新网址？
我的用例是我有一个产品列表，当我单击其中一个时，我会显示一个模态并希望将 url 更新为 example.com/product/1 之类的内容，以便链接可共享。
react-router：如何在不导致导航/重新加载的情况下更新 url？
IT技术
javascript
reactjs
react-router
2021-04-05 20:27:04
4个回答
无法使用 React Router 找到解决方案，但可以通过调用浏览器的历史记录界面来完成此操作：
window.history.replaceState(null, "New Page Title", "/pathname/goes/here")
您可以.replaceState 在此处了解更多信息。
React Routerhistory.replace并不总是有效
React Router 的history.replace方法可能会也可能不会触发重新渲染，具体取决于您的应用程序的路由设置（例如，您有一个包罗万象的/*路由）。它不会根据定义阻止渲染。
替换将覆盖 URL
this.props.history.replace({ pathname: `/product/${this.props.product.id}`})
我正在使用一种很好的方式来欺骗用户，即 URL 不会改变。
为此，您只需要像这样设置路由。
const Home = '/';
const About = '/ ';
const Contact = '/ ';
注意空格。所有字符都将计入引号内，因此它应该可以工作。
Routes.tsx
<Route exact path={Home} component={Home} />
<Route exact path={About} component={About} />
<Route exact path={Contact} component={Contact} />
在你的About.tsx和里面Contact.tsx：
useEffect(() => {
window.history.replaceState(null, '', Home);
}, []);
用户导航到About或Contact页面后，将调用钩子并运行回调函数内的代码。它将在组件呈现后删除空格。
这应该是伪装隐藏网址的绝招😂
当你在react组件中时，propshas history，你可以使用它。
对于那些正在寻找一种即使不在react组件内也能导航的方法的人，即，您无法获得props.history，这是一种方法：
在渲染路由器的组件中：
// outside the component
export const browserRouterRef = React.createRef();
// on render
<BrowserRouter ref={browserRouterRef}>
然后您可以browserRouterRef在任何地方导入并用于browserRouterRef.current.history更改路由，即使您不在 React 组件中。