I need to navigate back to the original requested URL after login.

For example, user enters www.example/settings as user is not authenticated, it will navigate to login page www.example/login.

Once authenticated, it should navigate back to www.example/settings automatically.

My original approach with react-router-dom v5 is quite simple:

const PrivateRoute = ({ isLoggedIn, ponent: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: `/login/${props.location.search}`, state: { from: props.location } }}
          />
        )
      }
    />
  );
};


<PrivateRoute exact isLoggedIn={isLoggedIn} path="/settings" ponent={Settings} />

Can some one tell me how to do that in v6? Thanks in advance

I need to navigate back to the original requested URL after login.

For example, user enters www.example./settings as user is not authenticated, it will navigate to login page www.example./login.

Once authenticated, it should navigate back to www.example./settings automatically.

My original approach with react-router-dom v5 is quite simple:

const PrivateRoute = ({ isLoggedIn, ponent: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: `/login/${props.location.search}`, state: { from: props.location } }}
          />
        )
      }
    />
  );
};


<PrivateRoute exact isLoggedIn={isLoggedIn} path="/settings" ponent={Settings} />

Can some one tell me how to do that in v6? Thanks in advance

• javascript
• reactjs
• react-router-dom

• One general approach is to have a query in pathname eg /login/search?next=/settings – Njuguna Mureithi Commented Dec 15, 2021 at 5:00
• how to remember the original url? i.e. how do I know i need to append settings to the url – Ben Li Commented Dec 15, 2021 at 5:07

1 Answer 1

In react-router-dom v6 rendering routes and handling redirects is quite different than in v5. Gone are custom route ponents, they are replaced with a wrapper ponent pattern.

v5 - Custom Route

Takes props and conditionally renders a Route ponent with the route props passed through or a Redirect ponent with route state holding the current location.

const CustomRoute = ({ isLoggedIn, ...props }) => {
  const location = useLocation();
  return isLoggedIn? (
    <Route {...props} />
  ) : (
    <Redirect
      to={{
        pathname: `/login/${location.search}`,
        state: { location },
      }}
    />
  );
};

...

<PrivateRoute
  exact
  isLoggedIn={isLoggedIn}
  path="/settings"
  ponent={Settings}
/>

v6 - Custom Wrapper

Takes props and conditionally renders an Outlet ponent for nested Route ponents to be rendered into or a Navigate ponent with route state holding the current location.

const CustomWrapper = ({ isLoggedIn, ...props }) => {
  const location = useLocation();
  return isLoggedIn? (
    <Outlet />
  ) : (
    <Navigate
      to={`/login/${location.search}`}
      replace
      state={{ location }}
    />
  )
};

...

<Route path="settings" element={<CustomWrapper isLoggedIn={isLoggedIn} />} >
  <Route path="settings" element={<Settings />} />
</Route>