chore(deps): update dependency react-router to v7.5.2 [security] (#1974)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: DustyD <xiao_peng0202@hotmail.com>

Author: renovate[bot]

frontend/package-lock.json

@@ -40,7 +40,7 @@
     "react-beforeunload": "^2.6.0",
     "react-dom": "^18.2.0",
     "react-hash-string": "^1.0.0",
-    "react-router": "^7.1.1",
+    "react-router": "^7.5.2",
     "react-test-renderer": "^18.2.0",
     "react-toastify": "^11.0.0",
     "sass": "^1.77.7",

frontend/package.json

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useEffect } from 'react';
 import {
-  createBrowserRouter, RouteObject, RouterProvider
+  BrowserRouter
 } from 'react-router';
 import { Amplify } from 'aws-amplify';
 import { ClassPrefix } from '@carbon/react';
@@ -11,19 +11,11 @@ import awsconfig from './aws-exports';
 import prefix from './styles/classPrefix';
 import './styles/custom.scss';
 import 'react-toastify/dist/ReactToastify.css';
-
-import Layout from './layout/PrivateLayout';
-import Landing from './views/Landing';
-import FourOhFour from './views/ErrorViews/FourOhFour';
-import LoginOrgSelection from './views/LoginOrgSelection';
-import ServiceStatus from './views/ServiceStatus';
 import { NavigateProvider } from './contexts/NavigationContext';
 import AuthContext from './contexts/AuthContext';
-import BrowserRoutes from './routes';
-import ROUTES from './routes/constants';
-import ProtectedRoute from './routes/ProtectedRoute';
 import { ThemePreference } from './utils/ThemePreference';
 import CustomQueryProvider from './components/CustomQueryProvider';
+import AppRoutes from './AppRoutes';
 
 Amplify.configure(awsconfig);
 
@@ -33,82 +25,25 @@ Amplify.configure(awsconfig);
  * @returns {JSX.Element} instance of the app ready to use.
  */
 const App: React.FC = () => {
-  const { signed, isCurrentAuthUser, selectedClientRoles } = useContext(AuthContext);
+  const { isCurrentAuthUser } = useContext(AuthContext);
 
   useEffect(() => {
     isCurrentAuthUser(window.location.pathname);
   }, []);
 
-  const roleSelectionRoutes: RouteObject[] = [
-    {
-      path: ROUTES.ALL_ROUTES,
-      element: <LoginOrgSelection />
-    }
-  ];
-
-  const signedRoutes: RouteObject[] = [
-    {
-      path: ROUTES.ROOT,
-      element: <ProtectedRoute />,
-      children: [
-        {
-          element: <Layout />,
-          children: BrowserRoutes
-        }
-      ]
-    },
-    {
-      path: ROUTES.FOUR_OH_FOUR,
-      element: <FourOhFour />
-    },
-    {
-      path: ROUTES.ALL_ROUTES,
-      element: <FourOhFour />
-    }
-  ];
-
-  const notSignedRoutes: RouteObject[] = [
-    {
-      path: ROUTES.ALL_ROUTES,
-      element: <Landing />
-    }
-  ];
-
-  const sharedRoutes: RouteObject[] = [
-    {
-      path: ROUTES.SERVICE_STATUS,
-      element: <ServiceStatus />
-    }
-  ];
-
-  const browserRouter = useMemo(() => {
-    const selectBrowserRoutes = () => {
-      if (!signed) {
-        return notSignedRoutes;
-      }
-      if (selectedClientRoles) {
-        return signedRoutes;
-      }
-      return roleSelectionRoutes;
-    };
-
-    const selectedRoutes = selectBrowserRoutes();
-    selectedRoutes.push(...sharedRoutes);
-
-    return createBrowserRouter(selectedRoutes);
-  }, [signed, selectedClientRoles]);
-
-  const handleRedirectTo403 = () => {
-    browserRouter.navigate('/403');
-  };
-
   return (
     <ClassPrefix prefix={prefix}>
       <ThemePreference>
-        <NavigateProvider onRedirect={handleRedirectTo403}>
+        <NavigateProvider onRedirect={() => {
+          // go to 403 page
+          window.location.href = '/403';
+        }}
+        >
           <CustomQueryProvider>
             <ToastContainer />
-            <RouterProvider router={browserRouter} />
+            <BrowserRouter>
+              <AppRoutes />
+            </BrowserRouter>
             <ReactQueryDevtools initialIsOpen={false} />
           </CustomQueryProvider>
         </NavigateProvider>

frontend/src/App.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable no-nested-ternary */
+import React, { useContext } from 'react';
+import { useRoutes, Navigate, Outlet } from 'react-router';
+import AuthContext from './contexts/AuthContext';
+import ROUTES from './routes/constants';
+import Landing from './views/Landing';
+import LoginOrgSelection from './views/LoginOrgSelection';
+import Layout from './layout/PrivateLayout';
+import ServiceStatus from './views/ServiceStatus';
+import FourOhFour from './views/ErrorViews/FourOhFour';
+import BrowserRoutes from './routes';
+
+const AppRoutes = () => {
+  const { signed, signOut, selectedClientRoles } = useContext(AuthContext);
+
+  const Protected = () => {
+    if (!signed) {
+      signOut();
+      return <Navigate to={ROUTES.ROOT} replace />;
+    }
+    return <Outlet />;
+  };
+
+  return useRoutes([
+    {
+      path: ROUTES.ROOT,
+      element: !signed
+        ? <Landing />
+        : signed && !selectedClientRoles
+          ? <LoginOrgSelection />
+          : <Protected />,
+      children: signed && selectedClientRoles
+        ? [{ element: <Layout />, children: BrowserRoutes }]
+        : undefined
+    },
+    { path: ROUTES.SERVICE_STATUS, element: <ServiceStatus /> },
+    { path: ROUTES.FOUR_OH_FOUR, element: <FourOhFour /> },
+    { path: '*', element: <FourOhFour /> }
+  ]);
+};
+
+export default AppRoutes;