58

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')
2
  • 1
    See reacttraining.com/react-router/web/api/Redirect : A simple redirect will add an entry to the history stack (you can go back to the previous route); if push with false, then the current url route is overritten, and you can't use the back button to return to the state you just left.
    – Piran
    Feb 5, 2018 at 10:42
  • 2
    @Piran, not true. Redirect overrides the current history unless you specify the push prop (as per the link you supplied) May 8, 2018 at 19:20

3 Answers 3

74

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

3
  • 9
    Any benefits of overwriting the current history stack ? Mar 9, 2021 at 0:33
  • 3
    @DollarAkshay, the user is not blocked when trying to navigate back. Dec 21, 2021 at 10:13
  • A use case: A user tried to access their settings page, but is not logged in. By using 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
37

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:

  1. 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.

  2. Use the <Redirect> component with or without the push property, depending

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.