score:-1

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, i.e., 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.

score:0

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 😂

score:0

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");

score:9

replace will override the URL

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

score:63

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 (e.g., you have a catch-all /* route). It does not prevent a render by definition.


Related Query

More Query from same tag