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

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

CodePudding user response：

Use / at the start.
For Example:

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

instead of

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

CodePudding user response：

Try this

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

CodePudding user response：

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/>
    </>
  )
}