Fix app layout loading issue in console app

apps/myaccount/src/configs/routes.tsx

@@ -21,7 +21,6 @@ import { RouteInterface } from "@wso2is/core/models";
 import React,{ FunctionComponent, lazy } from "react";
 import { AppConstants } from "../constants";
 import { AppLayout, AuthLayout, DashboardLayout, DefaultLayout, ErrorLayout } from "../layouts";
-import OverviewPage from "../pages/overview";
 
 /**
  * Get default page layout routes.

features/admin.core.v1/configs/routes.tsx

@@ -1685,7 +1685,7 @@ export const getAppLayoutRoutes = (): RouteInterface[] => {
             icon: null,
             id: "app",
             name: "App",
-            path: AppConstants.getPaths().get("ROOT"),
+            path: `${AppConstants.getPaths().get("ROOT")}*`,
             protected: false,
             showOnSidePanel: false
         },

features/admin.core.v1/package.json

@@ -75,6 +75,8 @@
         "react-joyride": "^2.3.0",
         "react-notification-system": "^0.4.0",
         "react-redux": "^7.2.9",
+        "react-router": "^6.23.1",
+        "react-router-dom": "^6.23.1",
         "reactflow": "^11.7.2",
         "recharts": "^2.6.2",
         "reduce-reducers": "^1.0.4",
@@ -112,8 +114,11 @@
         "@types/lodash-es": "^4.17.4",
         "@types/node": "^13.9.2",
         "@types/node-forge": "^0.9.3",
+        "@types/react": "18.2.22",
+        "@types/react-dom": "18.2.7",
         "@types/react-notification-system": "0.2.39",
         "@types/react-redux": "^7.1.25",
+        "@types/react-router-dom": "5.3.3",
         "@types/reactour": "^1.18.1",
         "@types/redux-mock-store": "^1.0.2",
         "@types/testing-library__jest-dom": "^5.14.3",

features/admin.core.v1/pages/errors/storage-disabled.tsx

@@ -19,18 +19,17 @@
 import { EmptyPlaceholder } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { RouteComponentProps } from "react-router-dom";
 import { getEmptyPlaceholderIllustrations } from "../../configs";
 import { AppConstants } from "../../constants";
 import { history } from "../../helpers";
 
 /**
  * Storage disabled error page.
  *
- * @param {RouteComponentProps} props - Props injected to the component.
+ * @param props - Props injected to the component.
  * @return {React.ReactElement}
  */
-const SessionStorageDisabled: FunctionComponent<RouteComponentProps> = (): ReactElement => {
+const SessionStorageDisabled: FunctionComponent = (): ReactElement => {
 
     const { t } = useTranslation();
 

features/admin.core.v1/pages/errors/unauthorized.tsx

@@ -19,7 +19,7 @@
 import { EmptyPlaceholder, LinkButton } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, RouteComponentProps } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { getEmptyPlaceholderIllustrations } from "../../configs";
 import { AppConstants } from "../../constants";
 
@@ -29,11 +29,9 @@ import { AppConstants } from "../../constants";
  * @param {RouteComponentProps} props - Props injected to the component.
  * @return {React.ReactElement}
  */
-const UnauthorizedErrorPage: FunctionComponent<RouteComponentProps> = (
-    props: RouteComponentProps
-): ReactElement => {
+const UnauthorizedErrorPage: FunctionComponent = (): ReactElement => {
 
-    const { location } = props;
+    const location = useLocation();
 
     const error = new URLSearchParams(location.search).get("error");
 

features/admin.layouts.v1/app.tsx

@@ -31,7 +31,7 @@ import {
 import React, { FunctionComponent, ReactElement, Suspense, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
 /**
  * Implementation of the Main app layout skeleton.
@@ -78,35 +78,41 @@ export const AppLayout: FunctionComponent<Record<string, unknown>> = (): ReactEl
                 ) }
             >
                 <Suspense fallback={ <PreLoader /> }>
-                    <Routes>
-                        {
-                            appRoutes.map((route: RouteInterface, index: number) => (
-                                route.redirectTo
-                                    ? <Route path="*" element={ <Navigate to={ route.redirectTo } /> } key={ index }/>
-                                    : route.protected
-                                        ? (
-                                            <Route
-                                                element={
-                                                    isAuthenticated && route.component ? <route.component /> : null
-                                                }
-                                                path={ route.path }
-                                                key={ index }
-                                            />
-                                        )
-                                        : (
-                                            <Route
-                                                path={ route.path }
-                                                element={
-                                                    route.component
-                                                        ? <route.component />
-                                                        : null
-                                                }
-                                                key={ index }
-                                            />
-                                        )
-                            ))
-                        }
-                    </Routes>
+                    <BrowserRouter>
+                        <Routes>
+                            {
+                                appRoutes.map((route: RouteInterface, index: number) => (
+                                    route.redirectTo
+                                        ? (<Route
+                                            path="*"
+                                            element={ <Navigate to={ route.redirectTo } /> }
+                                            key={ index }
+                                        />)
+                                        : route.protected
+                                            ? (
+                                                <Route
+                                                    element={
+                                                        isAuthenticated && route.component ? <route.component /> : null
+                                                    }
+                                                    path={ route.path }
+                                                    key={ index }
+                                                />
+                                            )
+                                            : (
+                                                <Route
+                                                    path={ route.path }
+                                                    element={
+                                                        route.component
+                                                            ? <route.component />
+                                                            : null
+                                                    }
+                                                    key={ index }
+                                                />
+                                            )
+                                ))
+                            }
+                        </Routes>
+                    </BrowserRouter>
                 </Suspense>
                 {
                     isCookieConsentBannerEnabled && (

features/admin.views.v1/app.tsx

@@ -77,7 +77,7 @@ import React, {
 import { useTranslation } from "react-i18next";
 import { System } from "react-notification-system";
 import { useDispatch, useSelector } from "react-redux";
-import { Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { Action } from "reduce-reducers";
 import { ThunkDispatch } from "redux-thunk";
 
@@ -90,6 +90,7 @@ import { ThunkDispatch } from "redux-thunk";
  */
 export const AppView: FunctionComponent = (): ReactElement => {
     const location  = useLocation()
+    const navigate = useNavigate();
 
     const dispatch: ThunkDispatch<AppState, void, Action> = useDispatch();
     const { t } = useTranslation();
@@ -352,12 +353,12 @@ export const AppView: FunctionComponent = (): ReactElement => {
                                 { ...subRoute.icon }
                             />,
                             label: t(subRoute.name),
-                            onClick: () => history.push(subRoute.path),
+                            onClick: () => navigate(subRoute.path),
                             selected: subRoute.selected ?? selectedRoute?.path === subRoute.path,
                             tag: t(subRoute.featureStatusLabel)
                         })),
                         label: t(route.name),
-                        onClick: () => history.push(route.path),
+                        onClick: () => navigate(route.path),
                         selected: route.selected ?? isRouteActive(route.path),
                         tag: t(route.featureStatusLabel)
                     }))
@@ -372,7 +373,8 @@ export const AppView: FunctionComponent = (): ReactElement => {
      * @returns if the navigation item is active.
      */
     const isRouteActive = (routePath: string): boolean => {
-        return history.location.pathname === routePath;
+        console.log(location.pathname === window.location.pathname)
+        return location.pathname === window.location.pathname;
     };
 
     return (