reactjs - React-router - how to navigate to previous auth link after successful login

Question

Bashing my head against the wall all weekend with this gem.

What I'm trying to do

I want a user to be able to be redirected to a previous auth link on successful login that they tried to get to.

Steps of logic wanted.

1. User navigates to /suggestions
2. User is redirected to the login page to get auth token
3. User logs in successfully
4. User gets navigated to the /suggestions page not the root /

At the moment I'm having the below logic.

1. User navigates to /suggestions
2. User is redirected to the login page to get auth token
3. User logs in successfully
4. User is redirected to the /suggestions.
5. Then immediately after is redirected to the root / path.

How am I trying to do this?

I'm trying to do this by setting a cookie in the browser to save the previous path. Which is working well at the moment. This then is checked against in my routeComponent file and uses a useHistory to push to that path and then removes the cookie. This is all done in a useEffect.

useEffect(() => {
  const cookie = getCookie('redirectPath');
  
  if (!HAS_ACCESS_TOKEN && !cookie) {
    RedirectOnLoginService.setRedirectCookie(rest.location.pathname);
  }

  if (HAS_ACCESS_TOKEN && cookie) {
    history.push(cookie);
    RedirectOnLoginService.removeRedirectCookie('redirectPath');
  }
}, [HAS_ACCESS_TOKEN, history, rest]);

This seems to be working for the most part it redirects the user but soon after it hits a return and this is where the user is then returned back to the root /. The cookie at this point is no longer available as it has been deleted in the useEffect.

if (!ev(VARIABLES.ACCESS_TOKEN)) {
  return (
    <Route
      {...rest}
      render={props =>
        HAS_ACCESS_TOKEN ? (
          !NO_USER_PROFILE ? (
            renderFn ? (
              renderFn(props)
            ) : (
              <Component {...props} />
            )
          ) : (
            <Loader />
          )
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

AuthenticationRoute

export const AuthenticationRoute = ({ component: Component, ...rest }) => {
  const { HAS_ACCESS_TOKEN } = usePermissions();
  return (
    <Route
      {...rest}
      render={props => (!HAS_ACCESS_TOKEN ? <Component {...props} /> : <Redirect to="/" />)}
    />
  );
};

For transparency this is what my app.js holds for the private routes:

<Switch>
  <Route path="/legal/:key" component={Legal} />
  <AuthenticationRoute
    key={'login'}
    exact
    path={'/login'}
    component={LoginScreen}
  />
  <Route key={'logout'} exact path={'/logout'} component={LogOutScreen} />
  <AuthenticationRoute
    key={'auth'}
    exact
    path={'/oauth'}
    component={AuthContainer}
  />
  <PrivateRoute
    path={'/hr'}
    renderFn={props => (
      <Page navigation={hrNavigation} routes={HrRoutes} isHr {...props} />
    )}
    adminOnly
  />
  <PrivateRoute
    path={'/'}
    renderFn={props => <Page routes={Routes} {...props} />}
  />
  <Route key={'404'} path={'/**'} component={NotFound} />
</Switch>

For the life of me I can't figure out why it is getting redirected to the root / and not to the suggestions page. Is there anything obvious that I am missing?

UPDATE

I have just tried to use Redirect component from react-router to see if this helps but I get the same outcome:

const cookie = getCookie('redirectPath');
    
if (!HAS_ACCESS_TOKEN && !cookie) {
  RedirectOnLoginService.setRedirectCookie(rest.location.pathname);
}

if (HAS_ACCESS_TOKEN && cookie) {
  // history.push(cookie);
  RedirectOnLoginService.removeRedirectCookie('redirectPath');
  return <Redirect to={cookie} />;
}

Answer 1

React-route provides a history.back() function, Did you tried it ?