I was reading react-router-redux examples and I confused, what is the difference beetween:
import { Redirect } from 'react-router-dom'
...
<Redirect to='/login' />
and
import { push } from 'react-router-redux'
...
push('/login')
I was reading react-router-redux examples and I confused, what is the difference beetween:
import { Redirect } from 'react-router-dom'
...
<Redirect to='/login' />
and
import { push } from 'react-router-redux'
...
push('/login')
The
<Redirect>
component will, by default, replace the current location with a new location in the history stack, basically working as a server-side redirect.But it can also be used with the property
push
and in this case it will push a new entry into the history stack, working the same way ashistory.push
.In fact the
<Redirect>
component uses the historypush
andreplace
methods behinds the scene. It is just a more React way of navigating.So basically you have two ways of navigating:
Use the
history.push
andhistory.replace
in a component (usually wrapped with thewithRouter
HOC, so that you can have access to thelocation
object without having to pass it from parent to child.Use the
<Redirect>
component with or without thepush
property, dependingRedirect
Rendering a
<Redirect>
will navigate to a new location. The new location willoverride the current location in the history stack,
like server-side redirects (HTTP 3xx) do.whereas History
push function
Pushes a new entry onto the history stack