React - Private Route - Protecting Dashboard with a Wrapper Class

PrivateRoute.js

//Code for PrivateRoute.js

import React from "react";

import {  Navigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";

export default function PrivateRoute({ children }) {
  const { currentUser } = useAuth();

  return currentUser ? children : <Navigate to="/login" />;
}

//Code for Dashboard element in your app.js
{/* Wrap the Component that needs authentication with PrivateRoute*/}
<Route path="/" element={<PrivateRoute> <Dashboard /></PrivateRoute>}></Route>
<Route path="/dashboard" element={<PrivateRoute> <Dashboard /></PrivateRoute>}></Route>