react-router Redirect vs history.push
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
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, 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.
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