I need to change url pletely using following way.

let myplteUrl = 'http://localhost/tracks/id/4/39'; // http://localhost/tracks/id/4/39/4 or 
props.history.push(`${myplteUrl}`);

I'm dynamically creating this myplteUrl variable. sometimes variable can be something like

http://localhost/tracks/id/4/39 or http://localhost/tracks/id/4/39/4 or http://localhost/tracks/id/4/39/4/5 (dynamic) or any

it is the same only up to http://localhost/tracks/id/4 this part. I need to replace whole url just like window.location.href = myplteUrl in normal javascript, but using props.history.push because i need to avoid from page refresh

I need to change url pletely using following way.

let myplteUrl = 'http://localhost/tracks/id/4/39'; // http://localhost/tracks/id/4/39/4 or 
props.history.push(`${myplteUrl}`);

I'm dynamically creating this myplteUrl variable. sometimes variable can be something like

http://localhost/tracks/id/4/39 or http://localhost/tracks/id/4/39/4 or http://localhost/tracks/id/4/39/4/5 (dynamic) or any

it is the same only up to http://localhost/tracks/id/4 this part. I need to replace whole url just like window.location.href = myplteUrl in normal javascript, but using props.history.push because i need to avoid from page refresh

• javascript
• reactjs

• can you share the before and after urls to understand. Basically, do the urls have a # for navigation ? – trk Commented Apr 15, 2020 at 16:02
• no , but it can have dynamic path like localhost/tracks/id/4/8383/82/134/3929.... issue is I can not say how many ../ (for parent location) I should have – coding_Lover Commented Apr 15, 2020 at 16:26
• Have you tried useHistory ? Here is a reference : reacttraining./react-router/web/api/Hooks/usehistory. This could solve your issue of navigation. – trk Commented Apr 15, 2020 at 16:29
• I'm calling this function in side a function. I'm getting an error saying '... which is neither a React functional ponent or a custom react hook functin' – coding_Lover Commented Apr 15, 2020 at 16:49

4 Answers 4

Note: for React Router v6

import { useNavigate } from 'react-router-dom';

function MyComponentOrHook() {
    const navigate = useNavigate();

    // push
    navigate(someUrl );     // syntax
    navigate("/about");     // example

    // replace - OP's question
    navigate(someUrl , { replace: true });      // syntax
    navigate("/about", { replace: true });      // example

    return ... // JSX or hook return values
}

Also, avoid using window.location if you're using React Router, except in rare cases (example - to navigate to an external link).

Reason:

1. The whole point of using a library React Router is to ease client-side routing so we don't have to do window.location....
2. window.location causes a reload, which should be avoided in React apps (or any SPA), mostly.

If you want to avoid from a page refresh you can do it in this way

window.history.pushState({}, null, "/newPathname");

Try the below way and define the exact URL you want.

  window.location.replace(`http://localhost:3000/${dynamic_value}`);

props.history.replace(myplteUrl);