I need to navigate back to the original requested URL after login.
For example, user enters www.example.com/settings as user is not authenticated, it will navigate to login page www.example.com/login.
Once authenticated, it should navigate back to www.example.com/settings automatically.
My original approach with react-router-dom v5 is quite simple:
const PrivateRoute = ({ isLoggedIn, component: 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" component={Settings} />
Can some one tell me how to do that in v6? Thanks in advance
In react-router-dom v6 rendering routes and handling redirects is quite different than in v5. Gone are custom route components, they are replaced with a wrapper component pattern.
v5 - Custom Route
Takes props and conditionally renders a Route component with the route props passed through or a Redirect component 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"
component={Settings}
/>
v6 - Custom Wrapper
Takes props and conditionally renders an Outlet component for nested Route components to be rendered into or a Navigate component 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>