41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { Navigate, Outlet, useLocation } from "react-router"
|
|
import { useAppSelector } from "@/store"
|
|
|
|
/**
|
|
* Renders child routes if the user is unauthenticated, otherwise redirects authenticated users to
|
|
* the root path.
|
|
*
|
|
* This component's logic allows unauthenticated users to access nested routes rendered
|
|
* via `Outlet`. Conversely, if a user is authenticated, they are redirected to the application's
|
|
* root path (`""`). This behaviour is inverse to the typical implementation of a 'protected route',
|
|
* which usually grants access to authenticated users and redirects unauthenticated users to a
|
|
* login page.
|
|
*/
|
|
export default function ProtectedRoute() {
|
|
/**
|
|
* Retrieves the authentication status from the Redux store.
|
|
*/
|
|
const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated)
|
|
|
|
/**
|
|
* Retrieves the current location object from React Router.
|
|
*/
|
|
const location = useLocation()
|
|
|
|
if (isAuthenticated) {
|
|
/**
|
|
* Redirects authenticated users to the application's root path (`""`).
|
|
*
|
|
* The redirection includes the current location's state, allowing the
|
|
* target route to know where the user was redirected from. The
|
|
* `replace` prop ensures the current history entry is replaced.
|
|
*/
|
|
return <Navigate to="" state={{ from: location }} replace />
|
|
}
|
|
|
|
/**
|
|
* Renders the child routes if the user is unauthenticated.
|
|
*/
|
|
return <Outlet />
|
|
}
|