Navigation, 404 and Protected Routes

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();
  const onLogin = async () => {
    await login();
    navigate('/dashboard', { replace: true }); // go to dashboard after login
  };
  return <button onClick={onLogin}>Log in</button>;
}

<Route path="*" element={<NotFound />} />

Show a page only to logged-in users; otherwise redirect to /login with <Navigate>.

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

function ProtectedRoute() {
  const { user } = useAuth();
  return user ? <Outlet /> : <Navigate to="/login" replace />;
}

<Route element={<ProtectedRoute />}>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/profile" element={<Profile />} />
</Route>