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')
Redirect
Rendering a <Redirect>
will navigate to a new location. The new location will override 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
Redirect
, we can redirect them to the log in page and remove the "settings" from their history, so that their back button won't take them back there. Bonus: It's nice to remember where they were trying to go, so after they log in we can redirect them there; in this case, to their settings page.
Nov 1, 2022 at 20:53
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 as history.push
.
In fact the <Redirect>
component uses the history push
and replace
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
and history.replace
in a component (usually wrapped with the withRouter
HOC, so that you can have access to the location
object without having to pass it from parent to child.
Use the <Redirect>
component with or without the push
property, depending
I noticed a difference between the two in my use case with Redux and Typescript.
Here's a simplified version of it:
export const LandingPage = () => {
const { history } = useHistory();
const { viewer } = useSelector(state => state.viewer);
// Redirect method returns another component that handles the redirect
// without mounting any of the route components
if (!viewer?.token) {
return <Redirect to="/signin" />;
}
// History.push method mounts the route component and runs 'onload' functions
// Which can still throw an error if there's no viewer
// if (!viewer?.token) {
// history.push('/signin');
// // return history.push('/signin'); // throws Typescript error
// }
return (
<Switch>
<Route path="/dashboard" component={Dashboard}/>
<Route path="/profile" component={Profile}/>
<Route path="/" component={Home}/>
</Switch>
);
};
When using history.push() method, the JSX in your return statement can still mount and run, whereas returning Redirect can block the rest of your code.
push
withfalse
, then the current url route is overritten, and you can't use the back button to return to the state you just left.Redirect
overrides the current history unless you specify the push prop (as per the link you supplied)