React router v6, prevent Protected route component revealing path for non-logged in users

Viewed 27

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.

0 Answers
Related