ログイン後に対象のURLへ遷移するように修正

src/components/LoadingScreen.tsx

@@ -3,14 +3,14 @@ import useBackDrop from "hooks/useBackDrop";
 import { useEffect } from "react";
 
 export default function LoadingScreen() {
-  const { setShowBackDrop } = useBackDrop();
+  const { setShowBackDrop, showBackDrop } = useBackDrop();
 
   useEffect(() => {
     setShowBackDrop(true);
     return () => {
       setShowBackDrop(false);
     };
-  }, []);
+  }, [showBackDrop]);
 
   return <Box>Loading...</Box>;
 }

src/guards/AuthGuard.tsx

@@ -0,0 +1,29 @@
+import { HasChildren } from "@types";
+import useAuth from "hooks/useAuth";
+import Login from "pages/auth/login";
+import { useState } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+
+export default function AuthGuard({ children }: HasChildren) {
+  const { authenticated } = useAuth();
+
+  const { pathname } = useLocation();
+
+  const [requestedLocation, setRequestedLocation] = useState<string | null>(
+    null
+  );
+
+  if (!authenticated) {
+    if (pathname !== requestedLocation) {
+      setRequestedLocation(pathname);
+    }
+    return <Login />;
+  }
+
+  if (requestedLocation && pathname !== requestedLocation) {
+    setRequestedLocation(null);
+    return <Navigate to={requestedLocation} />;
+  }
+
+  return <>{children}</>;
+}

src/pages/auth/login.tsx

@@ -9,6 +9,7 @@ import useSnackbarCustom from "hooks/useSnackbarCustom";
 import { PageID } from "pages";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useLocation } from "react-router-dom";
 import { getPath } from "routes/path";
 import * as Yup from "yup";
 
@@ -24,6 +25,7 @@ const LoginSchema = Yup.object().shape({
 
 export default function Login() {
   const { success, error } = useSnackbarCustom();
+  const { pathname } = useLocation();
 
   const [message, setMessage] = useState("");
   const [sending, setSending] = useState(false);
@@ -49,7 +51,9 @@ export default function Login() {
 
     if (ret) {
       success("ログイン成功");
-      navigateWhenChanged(getPath(PageID.DASHBOARD_OVERVIEW));
+      if (pathname === getPath(PageID.LOGIN)) {
+        navigateWhenChanged(getPath(PageID.DASHBOARD_OVERVIEW));
+      }
     } else {
       error("ログイン失敗");
       setMessage("入力情報を確認してください");

src/routes/sub/dashboard.tsx

@@ -1,4 +1,5 @@
 import { SeasonTicketContractContextProvider } from "contexts/dashboard/SeasonTicketContractContext";
+import AuthGuard from "guards/AuthGuard";
 import useAuth from "hooks/useAuth";
 import DashboardLayout from "layouts/dashbord";
 import { PageID } from "pages";
@@ -8,11 +9,7 @@ import { Loadable } from "routes";
 import { getRoute } from "routes/path";
 
 export default function DashboardRoutes(): RouteObject[] {
-  const { authenticated } = useAuth();
-
   const children: RouteObject[] = useMemo(() => {
-    if (!authenticated) return [];
-
     const Dashboard = Loadable(lazy(() => import("pages/dashboard")));
     const ContractEntry = Loadable(
       lazy(() => import("pages/dashboard/contract/entry"))
@@ -74,11 +71,9 @@ export default function DashboardRoutes(): RouteObject[] {
       ...others,
       path: getRoute(pageId),
     }));
-  }, [authenticated]);
+  }, []);
 
   const seasonTicketContractChildren: RouteObject[] = useMemo(() => {
-    if (!authenticated) return [];
-
     const ContractList = Loadable(
       lazy(() => import("pages/dashboard/contract/list"))
     );
@@ -163,11 +158,15 @@ export default function DashboardRoutes(): RouteObject[] {
       ...others,
       path: getRoute(pageId),
     }));
-  }, [authenticated]);
+  }, []);
 
   return [
     {
-      element: <DashboardLayout />,
+      element: (
+        <AuthGuard>
+          <DashboardLayout />
+        </AuthGuard>
+      ),
       children: children,
     },
     {