How can you implement a private route that requires authentication before rendering a component in React Router

Question

With the help of code may i know How can you implement a private route that requires authentication before rendering a component in React Router?

Answer 1

Basic Private Route Implementation (v6)

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

const PrivateRoute = ({ isAuthenticated }) => {

  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;

};

Usage in Route Configuration

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

function App() {

  const [isAuthenticated] = useAuth(); // Your auth state

  return (

    <Routes>

      {/* Public routes */}

      <Route path="/login" element={<LoginPage />} />

      {/* Protected routes */}

      <Route element={<PrivateRoute isAuthenticated={isAuthenticated} />}>

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

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

      </Route>

      {/* Catch-all */}

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

    </Routes>

  );

}