[英]react-router: How do I update the url without causing a navigation/reload?
With react router I have done this up update the url:使用 React 路由器,我已经更新了 url:
this.props.history.push({
pathname: `/product/${this.props.product.id}`,
});
However this causes a re-render/navigation change.然而,这会导致重新渲染/导航更改。 Is there a way to update the url without doing that?有没有办法在不这样做的情况下更新 url?
My use case is I have a list of products and when I click on one I show a Modal and want to update the url to something like example.com/product/1 so that the link is sharable.我的用例是我有一个产品列表,当我单击一个产品时,我会显示一个模态窗口,并希望将 url 更新为 example.com/product/1 之类的内容,以便可以共享该链接。
Wasn't able to find a solution using React Router, but was able to accomplish this using the browser's history interface by calling:无法使用 React Router 找到解决方案,但能够使用浏览器的历史界面通过调用:
window.history.replaceState(null, "New Page Title", "/pathname/goes/here")
You can learn more about .replaceState
here .您可以在此处了解有关.replaceState
的更多信息。
React Router's history.replace
won't always work React Router 的history.replace
并不总是有效
React Router's history.replace
method may or may not trigger a re-render depending on your app's route setup (eg, you have a catch-all /*
route). React Router 的history.replace
方法可能会也可能不会触发重新渲染,具体取决于您的应用程序的路由设置(例如,您有一个包罗万象的/*
路由)。 It does not prevent a render by definition.它不会根据定义阻止渲染。
替换将覆盖 URL
this.props.history.replace({ pathname: `/product/${this.props.product.id}`})
I'm using a nice way of tricking the users that's the URL doesn't change.我正在使用一种很好的方式来欺骗用户,即 URL 不会改变。
To do this, you'll just need to setup your routes like this.为此,您只需要像这样设置您的路线。
const Home = '/';
const About = '/ ';
const Contact = '/ ';
Notice the spaces.注意空格。 All characters will be counted inside the quote so it should work.所有字符都将计入引号内,因此它应该可以工作。
Routes.tsx
<Route exact path={Home} component={Home} />
<Route exact path={About} component={About} />
<Route exact path={Contact} component={Contact} />
Inside your About.tsx
and Contact.tsx
:在您的About.tsx
和Contact.tsx
中:
useEffect(() => {
window.history.replaceState(null, '', Home);
}, []);
After the user navigates to About
or Contact
pages, the hook will be called and run the code inside the callback function.用户导航到About
或Contact
页面后,将调用挂钩并运行回调函数内的代码。 It will remove the spaces after the component rendered.它将在组件渲染后删除空格。
That should be clean trick to disguise hidden URL 😂这应该是伪装隐藏 URL 的干净技巧😂
Old post but i thought i might as well answer.旧帖子,但我想我不妨回答一下。 I think what you are looking for is the useHistory()
hook.我认为您正在寻找的是useHistory()
钩子。
Usage:用法:
import { useHistory } from "react-router-dom";
const history = useHistory();
history.push("/my/url");
When you're inside a react component, the props
has history
, you can use that.当您在反应组件中时, props
具有history
,您可以使用它。
For those who are looking for a way to navigate even when not inside a react component, ie, you can't get the props.history
, this is one way to do it:对于那些即使不在反应组件内部也正在寻找一种导航方式的人,即您无法获得props.history
,这是一种方法:
In the component where you render the router:在渲染路由器的组件中:
// outside the component
export const browserRouterRef = React.createRef();
// on render
<BrowserRouter ref={browserRouterRef}>
Then you can import browserRouterRef
anywhere and use browserRouterRef.current.history
to change the route even if you are not inside a react component.然后,您可以在任何地方导入browserRouterRef
并使用browserRouterRef.current.history
更改路由,即使您不在反应组件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.