I created protected route for Profile page like this:
<Route path="/" element={<AppShell />}>
<Route path="/" element={<Home/>} />
<Route
path="/profile"
element={
<ProtectedRoute>
<Profile />
</ProtectedRoute>
}
/>
</Route>
and ProtectedRoute looks like:
function ProtectedRoute({
children,
redirectPath = "/",
replace = true,
}: Props): Protected {
const { auth }: { auth: boolean } = useAppSelector(selectUser);
if (auth) {
return children;
}
return <Navigate to={redirectPath} replace={replace} />;
}
In scenario mentioned above everything works, when non-logged in user clicks on "Profile" he is redirected to "Home" which is fine, BUT in url bar appears/blink "localhost:3000/profile" for a moment.
Of couse, component is not shown, but is possible to check Auth status before Link/NavLink do redirection? To be precise I want to prevent even showing protected route into address bar.