Merge branch 'fix/react-router-v7_relativeSplatPath' of https://githu…

…b.com/Altinn/app-frontend-react into fix/react-router-v7_relativeSplatPath
Altinn · Dec 12, 2024 · 8547c1e · 8547c1e
2 parents 70851c7 + 60dda6a
commit 8547c1e
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -171,7 +171,7 @@
     "react-helmet-async": "2.0.5",
     "react-leaflet": "4.2.1",
     "react-number-format": "5.4.2",
-    "react-router-dom": "6.28.0",
+    "react-router-dom": "7.0.2",
     "react-toastify": "10.0.6",
     "terraformer-wkt-parser": "1.2.1",
     "typescript": "5.7.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -28,50 +28,44 @@ export const App = () => (
         element={<FormFirstPage />}
       />
     </Route>
+    <Route
+      path='/instance-selection/*'
+      element={<InstanceSelectionWrapper />}
+    />
 
-    <Route path='/instance-selection'>
-      <Route
-        path='*'
-        element={<InstanceSelectionWrapper />}
-      />
-    </Route>
+    <Route
+      path='/party-selection/*'
+      element={<PartySelection />}
+    />
 
-    <Route path='/party-selection'>
+    <Route
+      path='/instance/:partyId/:instanceGuid/*'
+      element={
+        <InstanceProvider>
+          <Outlet />
+        </InstanceProvider>
+      }
+    >
       <Route
-        path='*'
-        element={<PartySelection />}
+        path=':taskId/*'
+        element={<ProcessWrapper />}
       />
-    </Route>
-
-    <Route path='/instance/:partyId/:instanceGuid'>
       <Route
-        path='*'
-        element={
-          <InstanceProvider>
-            <Outlet />
-          </InstanceProvider>
-        }
-      >
-        <Route
-          path=':taskId/*'
-          element={<ProcessWrapper />}
-        />
-        <Route
-          path={TaskKeys.ProcessEnd}
-          element={<DefaultReceipt />}
-        />
-        <Route path={TaskKeys.CustomReceipt}>
-          <Route
-            path='*'
-            element={<CustomReceipt />}
-          />
-        </Route>
+        path={TaskKeys.ProcessEnd}
+        element={<DefaultReceipt />}
+      />
+      <Route path={TaskKeys.CustomReceipt}>
         <Route
-          index
-          element={<NavigateToStartUrl />}
+          path='*'
+          element={<CustomReceipt />}
         />
       </Route>
+      <Route
+        index
+        element={<NavigateToStartUrl />}
+      />
     </Route>
+
     {/**
      * Redirects from legacy URLs to new URLs
      */}
@@ -86,3 +80,98 @@ export const App = () => (
     />
   </Routes>
 );
+
+// import React from 'react';
+// import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
+//
+// import { Form, FormFirstPage } from 'src/components/form/Form';
+// import { PresentationComponent } from 'src/components/presentation/Presentation';
+// import { NavigateToStartUrl, ProcessWrapper } from 'src/components/wrappers/ProcessWrapper';
+// import { Entrypoint } from 'src/features/entrypoint/Entrypoint';
+// import { InstanceProvider } from 'src/features/instance/InstanceContext';
+// import { PartySelection } from 'src/features/instantiate/containers/PartySelection';
+// import { InstanceSelectionWrapper } from 'src/features/instantiate/selection/InstanceSelection';
+// import { CustomReceipt, DefaultReceipt } from 'src/features/receipt/ReceiptContainer';
+// import { TaskKeys } from 'src/hooks/useNavigatePage';
+// import { PresentationType } from 'src/types';
+//
+// export const App = () => (
+//   <Routes>
+//     <Route element={<Entrypoint />}>
+//       <Route
+//         path=':pageKey'
+//         element={
+//           <PresentationComponent type={PresentationType.Stateless}>
+//             <Form />
+//           </PresentationComponent>
+//         }
+//       />
+//       <Route
+//         index
+//         element={<FormFirstPage />}
+//       />
+//     </Route>
+//
+//     <Route
+//       path='/instance-selection'
+//       element={<Entrypoint />}
+//     >
+//       <Route
+//         path='*'
+//         element={<InstanceSelectionWrapper />}
+//       />
+//     </Route>
+//
+//     <Route
+//       path='/party-selection'
+//       element={<Entrypoint />}
+//     >
+//       <Route
+//         path='*'
+//         element={<PartySelection />}
+//       />
+//     </Route>
+//
+//     <Route path='/instance/:partyId/:instanceGuid'>
+//       <Route
+//         path='*'
+//         element={
+//           <InstanceProvider>
+//             <Outlet />
+//           </InstanceProvider>
+//         }
+//       >
+//         <Route
+//           path=':taskId/*'
+//           element={<ProcessWrapper />}
+//         />
+//         <Route
+//           path={TaskKeys.ProcessEnd}
+//           element={<DefaultReceipt />}
+//         />
+//         <Route path={TaskKeys.CustomReceipt}>
+//           <Route
+//             path='*'
+//             element={<CustomReceipt />}
+//           />
+//         </Route>
+//         <Route
+//           index
+//           element={<NavigateToStartUrl />}
+//         />
+//       </Route>
+//     </Route>
+//     {/**
+//      * Redirects from legacy URLs to new URLs
+//      */}
+//     <Route
+//       path='/partyselection/*'
+//       element={
+//         <Navigate
+//           to='/party-selection/'
+//           replace={true}
+//         />
+//       }
+//     />
+//   </Routes>
+// );
diff --git a/src/components/wrappers/ProcessWrapper.tsx b/src/components/wrappers/ProcessWrapper.tsx
@@ -140,16 +140,14 @@ export const ProcessWrapper = () => {
     return (
       <FormProvider>
         <Routes>
-          <Route path=':pageKey/:componentId'>
-            <Route
-              path='*'
-              element={
-                <PresentationComponent type={ProcessTaskType.Data}>
-                  <ComponentRouting />
-                </PresentationComponent>
-              }
-            />
-          </Route>
+          <Route
+            path=':pageKey/:componentId/*'
+            element={
+              <PresentationComponent type={ProcessTaskType.Data}>
+                <ComponentRouting />
+              </PresentationComponent>
+            }
+          />
           <Route
             path='*'
             element={

diff --git a/src/features/receipt/ReceiptContainer.tsx b/src/features/receipt/ReceiptContainer.tsx
@@ -116,16 +116,14 @@ export function CustomReceipt() {
   return (
     <FormProvider>
       <Routes>
-        <Route path=':pageKey/:componentId'>
-          <Route
-            path='*'
-            element={
-              <PresentationComponent type={ProcessTaskType.Archived}>
-                <ComponentRouting />
-              </PresentationComponent>
-            }
-          />
-        </Route>
+        <Route
+          path=':pageKey/:componentId/*'
+          element={
+            <PresentationComponent type={ProcessTaskType.Archived}>
+              <ComponentRouting />
+            </PresentationComponent>
+          }
+        />
         <Route
           path='*'
           element={

diff --git a/src/index.tsx b/src/index.tsx
@@ -44,25 +44,18 @@ import 'react-toastify/dist/ReactToastify.css';
 import 'src/index.css';
 import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
 
-const router = createHashRouter(
-  [
-    {
-      path: '*',
-      element: (
-        <AppRoutingProvider>
-          <ErrorBoundary>
-            <Root />
-          </ErrorBoundary>
-        </AppRoutingProvider>
-      ),
-    },
-  ],
+const router = createHashRouter([
   {
-    future: {
-      v7_relativeSplatPath: true,
-    },
+    path: '*',
+    element: (
+      <AppRoutingProvider>
+        <ErrorBoundary>
+          <Root />
+        </ErrorBoundary>
+      </AppRoutingProvider>
+    ),
   },
-);
+]);
 
 document.addEventListener('DOMContentLoaded', () => {
   propagateTraceWhenPdf();