Merge pull request #380 from bartoval/error_no_route

fix(Core UI): 🐞 Routing after an app error is not possible

src/App.tsx

@@ -1,15 +1,13 @@
 import { Suspense } from 'react';
 
 import { Page } from '@patternfly/react-core';
-import { QueryErrorResetBoundary } from '@tanstack/react-query';
-import { ErrorBoundary } from 'react-error-boundary';
+import { AnimatePresence } from 'framer-motion';
 
 import SkBreadcrumb from '@core/components/SkBreadcrumb';
 import { getThemePreference, reflectThemePreference } from '@core/utils/isDarkTheme';
 import SkHeader from '@layout/Header';
 import RouteContainer from '@layout/RouteContainer';
 import SkSidebar from '@layout/SideBar';
-import ErrorConsole from '@pages/shared/Errors/Console';
 import LoadingPage from '@pages/shared/Loading';
 import { routes } from 'routes';
 
@@ -27,15 +25,11 @@ const App = function () {
       isManagedSidebar
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <QueryErrorResetBoundary>
-          {({ reset }) => (
-            <ErrorBoundary onReset={reset} FallbackComponent={ErrorConsole}>
-              <Suspense fallback={<LoadingPage />}>
-                <RouteContainer>{routes}</RouteContainer>
-              </Suspense>
-            </ErrorBoundary>
-          )}
-        </QueryErrorResetBoundary>
+        <Suspense fallback={<LoadingPage />}>
+          <AnimatePresence mode="wait">
+            <RouteContainer>{routes}</RouteContainer>
+          </AnimatePresence>
+        </Suspense>
       }
     />
   );

src/layout/RouteContainer.tsx

@@ -1,18 +1,28 @@
-import { AnimatePresence } from 'framer-motion';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useRoutes, RouteObject } from 'react-router-dom';
 
+import ErrorConsole from '@pages/shared/Errors/Console';
+
 interface RouteProps {
   children: RouteObject[];
 }
 
 const RouteContainer = function ({ children: routes }: RouteProps) {
   const appRoutes = useRoutes([...routes, { path: '/', element: routes[0].element }]);
-
   if (!appRoutes) {
     return null;
   }
 
-  return <AnimatePresence mode="wait">{appRoutes}</AnimatePresence>;
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary key={window.location.hash} onReset={reset} FallbackComponent={ErrorConsole}>
+          {appRoutes}
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
 };
 
 export default RouteContainer;