Route GuardAuth GuardFor NextJS How to work ? A private route can be protected using this AuthGuard component. It decides whether to permit navigation to a requested route. AuthGuard.jsx_23"use client";_23_23import { useState, useEffect } from "react";_23import { usePathname, useRouter } from "next/navigation";_23import useAuth from "hooks/useAuth";_23_23const AuthGuard = ({ children }) => {_23 const router = useRouter();_23 const pathname = usePathname();_23 const { isAuthenticated } = useAuth();_23 const [isLoggedIn, setIsLoggedIn] = useState(false);_23_23 useEffect(() => {_23 if (!isAuthenticated) router.replace("/login");_23 else setIsLoggedIn(true);_23 }, [isAuthenticated]);_23_23 if (isLoggedIn) return <>{children}</>;_23_23 return <Loading />;_23};_23_23export default AuthGuard; How to use it ? layout.jsx_12import { AuthGuard } from "components/auth";_12import DashboardLayout from "layouts/dashboard/DashboardLayout";_12_12const Layout = ({ children }) => {_12 return (_12 <AuthGuard>_12 <DashboardLayout>{children}</DashboardLayout>_12 </AuthGuard>_12 );_12};_12_12export default Layout;For ReactFor React