How do you implement protected/private routes?

A protected (or private) route only renders its content when the user meets some condition (usually "is authenticated"), otherwise it redirects them elsewhere (e.g., to /login). In React Router v6+, the cleanest way is a small wrapper component that renders <Outlet /> for its children or a <Navigate> redirect:

     import { Navigate, Outlet, useLocation } from "react-router-dom";

     function RequireAuth() {
       const { user } = useAuth(); // your own auth hook/context
       const location = useLocation();

       if (!user) {
         // Redirect to login, remembering where the user was headed
         return <Navigate to="/login" state={{ from: location }} replace />;
       }

       return <Outlet />; // render the matched child route
     }
     

     import { Routes, Route } from "react-router-dom";

     function App() {
       return (
         <Routes>
           <Route path="/login" element={<Login />} />

           {/* Every nested route below requires auth */}
           <Route element={<RequireAuth />}>
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/settings" element={<Settings />} />
           </Route>
         </Routes>
       );
     }
     

After a successful login, read location.state?.from (set above) and navigate(from, { replace: true }) to send the user back to the page they originally tried to reach.

Key points:

• Wrapping with a layout route (<Route element={<RequireAuth />}>) that renders <Outlet /> lets you protect many nested routes at once, instead of guarding each element individually.
• Use replace on the redirect so the protected URL isn't left in history (prevents "back button" from flashing the protected page).
• For role-based protection (e.g., admin-only), generalize RequireAuth to accept an allowedRoles prop and check both authentication and authorization.
• Client-side route guards are a UX convenience, not a security boundary — always enforce access control on the server/API too.