How do you create protected routes in React

Question

With the help of proper programming can you tell me How do you create protected routes in React?

Answer 1

Creating Protected Routes in React (React Router v6)

1. Create a ProtectedRoute Component

import { Navigate } from "react-router-dom";

const ProtectedRoute = ({ children }) => {

  const isAuthenticated = localStorage.getItem("authToken"); // Example auth check

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

};

export default ProtectedRoute;

2. Use ProtectedRoute in App.js

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

import Home from "./Home";

import Dashboard from "./Dashboard";

import Login from "./Login";

import ProtectedRoute from "./ProtectedRoute";

const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

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

        <Route 

          path="/dashboard" 

          element={

            <ProtectedRoute>

              <Dashboard />

            </ProtectedRoute>

          } 

        />

      </Routes>

    </Router>

  );

};

export default App;