React Router - PrivateRoute, redirect to original destination after login

Question

I'm having trouble with post-login redirection using React Router.

Say the user attempts to navigate to http://website.com/app/profile/2 but is redirected to http://website.com/login because their session expired. The endpoint /app exists within a PrivateRoute.

After login, I'd like the user to be directed to http://website.com/app/profile/2, but instead, they currently only redirected to /app.

How can I utilize the original destination for redirect after a successful login?

Thanks for your time!

score 3 · Accepted Answer · answered Jul 22 '20 at 21:02

you can check this from the private route like this:

const PrivateRoute = ({component: Component, ...rest}) => {
    let token = localStorage.getItem('token');
    let pathname = this.props.location.pathname;

    if(!token && pathname != '/login'){
       localStorage.setItem('redirectTo', pathname);
    }
    
    return (<Route {...rest} render={(props) => (
            token
                ? <Component {...props} />
                : <Redirect to='/login'/>
        )}/>
    );
};

in this way, if the user has a token in localStorage, then redirect to the page that he requested, if not, then redirect to login page and store the path requested in local storage, then after the login function success to login you can check this

let redirectTo = localStorage.getItem('redirectTo');
if(redirectTo ){
    window.location.href = redirectTo;
}

Pointing out two required edits bc this exact snippet does not work. This example writes PrivateRoute as a functional component, so you cannot access `this.props`. You've also destructured props into `component` and `rest` so the third line needs to be changed to `let pathname = rest.location.pathname;`. Otherwise, this works well as a solution. ty! — Casey L, Feb 27 '21 at 20:13

mouchin777 · Answer 2 · 2020-07-22T20:29:56.880

2

You could try creating some sort of check in the privateRoute component or whatever you are using that stores the name of the accessed route if the user fails to authenticate. (Storing it right before redirecting the user to the login page)

Then in the login function, you can check for the localstorage of the user before redirecting, if he has a value in the localstorage, redirect him to the stores route, else redirect to the main post-login route

EDIT: Check this to get the route name React Router v4 - How to get current route?

I usually get it using

this.props.location.pathname

edited Jul 22 '20 at 20:29

answered Jul 22 '20 at 20:24

mouchin777

1,428
1
31
59

Thanks for the quick response!! I'll try this out and will report back. Really appreciate it! – mg2019 Jul 22 '20 at 20:30

React Router - PrivateRoute, redirect to original destination after login

2 Answers2

Linked