Redirect to previous path on login - React Router v4

Following this example you can make a component PrivateRoute to wrap Route and use that whenever you need a route that requires auth.

This is the component code from the example.

const PrivateRoute = ({ component: Component, ...rest }) => (    <Route {...rest} render={props => (            fakeAuth.isAuthenticated ?             (<Component {...props}/>)             :             (              <Redirect to={{                    pathname: '/login',                    state: { from: props.location }                }}              />            )        )}    />)

Previous answers are not detail enough.

Solution:

Router

<BrowserRouter basename={BASE_NAME}>  <Switch>    {publicRouteList()}    <Route exact key="login" path="/login" component={Login} />    {getLoggedRouteList(state.logged)}    <Redirect key="redirect-login" to="/login" />  </Switch></BrowserRouter>

getLoggedRouteList

const getLoggedRouteList = (logged) => {  if (!logged) {    return (      <Route        key="wait-login"        render={props => {          return (            <Redirect              to={{                pathname: '/login',                state: { from: props.location },              }}            />          );        }}      />    );  }  const output = [];  output.push(    /* Here place route list that need logged */  );  return output;}

Login Component

class Login extends React.Component {  login = async param => {    const { location } = this.props;    const { state } = location;    /* Here place request login api */    // go to state.from if set before    if (state && state.from) {      history.replace(state.from);    }    // else go to home    else {      history.replace('/');    }  }}

You can use query strings to accomplish this.

Add dependency query-string to your react app.

Whenever the user is trying to access a protected path, you have to redirect to the log-in screen if the user is not logged in yet. To do this you will do something like this.

history.push('/login');

But we can pass the previous as a query as follows. We can take the previous path using useLocation from react-router

 const lastLocation = useLocation(); history.push(`/login?redirectTo=${lastLocation}`);

Now after successful login, we can get the query string that was passed in the previous path. We can set a default path if the previous path is null.

 const handleSuccessLogin = () => {      const location = useLocation();      const { redirectTo } = queryString.parse(location.search);      history.push(redirectTo == null ? "/apps" : redirectTo); };

Inspired by https://ui.dev/react-router-v4-query-strings/