How to redirect page without nesting the url in react-router-dom

Question

I use react-router-dom v5 for routing in my application. In some case I have route like this:

checkup/step-1/:id
checkup/step-2/:id
checkup/step-3/:id

For example, I'm at checkup/step-1/:id so I want to redirect from there to checkup/step-2/:id . To redirect I use hisory.push() . But the result is become like this:

checkup/step-1/:id/checkup/step-2/:id

But my expected result is:

checkup/step-2/:id

Answer 1

Use / at the start.
For Example:

history.push('/checkup/step-2/:id')

instead of

history.push('checkup/step-2/:id')

Answer 2

you can use Redirect component provided by react-router-dom

eg:

import {Redirect} from 'react-router-dom'
function MyComponent (){
  return (
    <>
      {condition && <Redirect to='/your-desire-path'/>}
      <MyOtherStaff/>
    </>
  )
}