Lift all the remaining routes

pulp · Dec 16, 2024 · 5bf774d · 5bf774d
1 parent 7082795
commit 5bf774d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/src/app-routes.tsx b/src/app-routes.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro';
 import { Banner, Flex, FlexItem } from '@patternfly/react-core';
 import WrenchIcon from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
 import { type ElementType } from 'react';
-import { Navigate, Route, Routes, useLocation } from 'react-router';
+import { Navigate, useLocation } from 'react-router';
 import { ErrorBoundary, ExternalLink, NotFound } from 'src/components';
 import {
   AboutProject,
@@ -344,25 +344,19 @@ const AuthHandler = ({
   );
 };
 
-export const AppRoutes = () => (
-  <Routes>
-    {routes.map(({ beta, component, noAuth, path }, index) => (
-      <Route
-        element={
-          <AuthHandler
-            beta={beta}
-            component={component}
-            noAuth={noAuth}
-            path={path}
-          />
-        }
-        key={index}
+const appRoutes = () =>
+  routes.map(({ beta, component, noAuth, path, ...rest }) => ({
+    element: (
+      <AuthHandler
+        beta={beta}
+        component={component}
+        noAuth={noAuth}
         path={path}
       />
-    ))}
-    <Route path='*' element={<NotFound />} />
-  </Routes>
-);
+    ),
+    path: path,
+    ...rest,
+  }));
 
 export const dataRoutes = [
   {
@@ -372,10 +366,12 @@ export const dataRoutes = [
         errorElement: <ErrorBoundary />,
         children: [
           {
-            path: '/',
+            index: true,
             element: <Navigate to={formatPath(Paths.core.status)} />,
           },
-          { path: '*', element: <AppRoutes /> },
+          ...appRoutes(),
+          // "No matching route" is not handled by the error boundary.
+          { path: '*', element: <NotFound /> },
         ],
       },
     ],

diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx
@@ -1,12 +1,26 @@
 import { isRouteErrorResponse, useRouteError } from 'react-router';
-import { NotFound } from 'src/components';
 
 export const ErrorBoundary = () => {
   const error = useRouteError();
 
-  if (isRouteErrorResponse(error) && error.status == 404) {
-    return <NotFound />;
-  } else {
+  if (isRouteErrorResponse(error)) {
+    return (
+      <>
+        <h1>
+          {error.status} {error.statusText}
+        </h1>
+        <p>{error.data}</p>
+      </>
+    );
+  } else if (error instanceof Error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
     console.error(error);
     return <div>Something went horribly wrong!</div>;
   }