CODEWITHSUNDEEP
react-routerreact-router-dom
Péah
Péah

Reputation: 131

How to use push in React Router DOM v6

I use react-router-dom v6, I saw that there were some changes.

I need to replace this:

return <Redirect push to={`/url/${this.state.myState}`}/>

with:

return <Navigate replace to={`/url/${this.state.myState}`} />

but I don't know to use the "push" on the v6.

Upvotes: 0

Views: 3679

Answers (1)

Max Larionov
Max Larionov

Reputation: 484

The explicit syntax in React Router v6 would be this:

<Navigate to={`/url/${this.state.myState}`} replace={true} />

The ability to redirect has been removed from React Router. So this means there is no , redirectTo, or isRedirect, and no replacement APIs either.

Be aware that the v5 uses replace logic by default (you may change it via push prop), on the other hand, the v6 uses push logic by default and you may change it via replace prop.

So you do not need to specify push explicitly as it is a default from now on.

As specified in the migration guide:

// Change this:
<Redirect to="about" />
<Redirect to="home" push />

// to this:
<Navigate to="about" replace />
<Navigate to="home" />

Reference: https://reactrouter.com/docs/en/v6/upgrading/v5

Upvotes: 3

Related Questions