react-router: How do I update the url without causing a navigation/reload?

Question

With react router I have done this up update the 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?

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.

Answer 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:

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

You can learn more about .replaceState here .

React Router's history.replace won't always work

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). It does not prevent a render by definition.

Answer 2

替换将覆盖 URL

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

Answer 3

I'm using a nice way of tricking the users that's the URL doesn't change.

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 :

  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. It will remove the spaces after the component rendered.

That should be clean trick to disguise hidden URL 😂

Answer 4

Old post but i thought i might as well answer. I think what you are looking for is the useHistory() hook.

Usage:

import { useHistory } from "react-router-dom";

const history = useHistory();
history.push("/my/url");

Answer 5

When you're inside a react component, the props has history , you can use that.

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:

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.