Skip to content

chore: upgrades to react router v7#17703

Merged
cammiida merged 2 commits intomainfrom
chore/upgrade-react-router-v7
Feb 17, 2026
Merged

chore: upgrades to react router v7#17703
cammiida merged 2 commits intomainfrom
chore/upgrade-react-router-v7

Conversation

@cammiida
Copy link
Contributor

@cammiida cammiida commented Feb 11, 2026

Description

Verification

  • Related issues are connected (if applicable)
  • Your code builds clean without any errors or warnings
  • Manual testing done (required)
  • Relevant automated test added (if you find this hard, leave it and we'll help out)

Summary by CodeRabbit

  • Chores
    • Switched core routing library and introduced a new layout-based top-level routing structure, affecting navigation flow.
    • Removed experimental routing feature flags to simplify configuration.
  • Tests
    • Simplified test routing setup and updated global Request polyfill for more realistic testing.
  • Chore / Behaviour
    • Certain previously-ignored router warning messages are now surfaced in logs/tests.

@github-actions github-actions bot added skip-releasenotes Issues that do not make sense to list in our release notes kind/dependencies Used for issues or pull requests that are dependency updates skip-second-approval Pull requests that only need one approval from a reviewer. labels Feb 11, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 11, 2026

📝 Walkthrough

Walkthrough

Top-level migration from react-router-dom v6 to react-router v7 across the frontend: dependency swap, widespread import updates, removal of v7 feature flags from router setup, App.tsx removed and index.tsx refactored to a layout-based RouterProvider wiring, minor prop/type cleanup and test polyfill adjustments.

Changes

Cohort / File(s) Summary
Package
src/App/frontend/package.json
Replaced react-router-dom v6.30.3 with react-router v7.13.0; removed @types/react-router-dom.
Top-level routing & layout
src/App/frontend/src/index.tsx, src/App/frontend/src/App.tsx, src/App/frontend/src/test/renderWithProviders.tsx, src/App/frontend/src/test/routerUtils.tsx
Removed previous App.tsx; index.tsx reworked to an AppLayout + RouterProvider structure; imports switched to react-router; removed v7 future feature flags from test and runtime routers.
Routing hooks (imports updated)
src/App/frontend/src/**/* (multiple files across features, layout, components, hooks — e.g., src/.../useNavigatePage.ts, src/.../useIsNavigating.ts, src/layout/*, src/features/*)
Replaced react-router-dom imports with react-router for hooks/components: useNavigate, useNavigation, useLocation, useParams, useSearchParams, matchPath, Navigate, Outlet, Link, Form, etc. Changes are import-source only in most files.
Subform routing change
src/App/frontend/src/layout/Subform/index.tsx
Removed Routes/Route usage; replaced with conditional SubformRouting based on navigation param (dataElementId), rendering either subform wrapper or redirect component.
Type / prop surface change
src/App/frontend/src/features/instantiate/containers/InstantiationErrorPage.tsx
Removed RouteProps extension from IInstantiationErrorPageProps and deleted its import.
Tests & test setup
src/App/frontend/src/features/*/*.test.tsx, src/App/frontend/src/layout/*/*.test.tsx, src/App/frontend/src/setupTests.ts, src/App/frontend/test/*
Updated test imports and mocks to react-router; removed v7-specific future props from MemoryRouter usage in tests; expanded Request polyfill shape and constructor in setupTests; removed some ignored v7 warning patterns from e2e fail-on-console-log.
Minor routing util updates
src/App/frontend/src/hooks/navigation.ts, src/App/frontend/src/queries/appPrefetcher.ts
Switched matchPath/useLocation imports to react-router; docs/comments updated to reference react-router.

Sequence Diagram(s)

sequenceDiagram
    participant Browser as Browser
    participant Router as RouterProvider (react-router)
    participant AppLayout as AppLayout (Entrypoint/Layout)
    participant Providers as Global Providers (UiConfig, Party, Form, etc.)
    participant Features as Feature Routes (Entrypoint, Instance, PDF, Form)

    Browser->>Router: request URL
    Router->>AppLayout: resolve route -> AppLayout (layout route)
    AppLayout->>Providers: wrap route outlet with providers
    Providers->>Features: render matched feature via Outlet
    Features->>Providers: request instance/party data (providers)
    Providers-->>Features: provide data
    Features-->>Browser: render UI / navigation actions
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A hop from DOM to Router, light and spry,
New layout paths beneath the sky,
Hooks rehomed, tests tuned just so,
Flags tucked away, the routes now flow,
A rabbit cheers—onward we go!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is entirely empty—only the template structure remains with all sections unfilled. No actual description of changes, motivation, or verification details have been provided by the author. Fill in the Description section with details about the React Router v7 upgrade, breaking changes, and migration steps. Confirm verification checklist items are completed.
Merge Conflict Detection ⚠️ Warning ❌ Merge conflicts detected (90 files):

⚔️ .claude/settings.json (content)
⚔️ .codex/rules/default.rules (content)
⚔️ .github/workflows/app-backend-codeql.yml (content)
⚔️ .github/workflows/app-codelists-codeql.yml (content)
⚔️ .github/workflows/app-fileanalyzers-codeql.yml (content)
⚔️ .github/workflows/app-frontend-codeql.yml (content)
⚔️ .github/workflows/designer-backend-codeql.yml (content)
⚔️ .github/workflows/designer-frontend-unit-tests.yml (content)
⚔️ src/App/frontend/package.json (content)
⚔️ src/App/frontend/src/components/form/Form.tsx (content)
⚔️ src/App/frontend/src/components/form/LinkToPotentialNode.tsx (content)
⚔️ src/App/frontend/src/components/form/LinkToPotentialPage.tsx (content)
⚔️ src/App/frontend/src/components/wrappers/ProcessWrapper.tsx (content)
⚔️ src/App/frontend/src/core/routing/useIsNavigating.ts (content)
⚔️ src/App/frontend/src/core/ui/RenderStart.tsx (content)
⚔️ src/App/frontend/src/features/entrypoint/Entrypoint.tsx (content)
⚔️ src/App/frontend/src/features/formData/FormData.test.tsx (content)
⚔️ src/App/frontend/src/features/instance/InstanceContext.tsx (content)
⚔️ src/App/frontend/src/features/instantiate/InstantiationError.tsx (content)
⚔️ src/App/frontend/src/features/instantiate/containers/InstantiationErrorPage.tsx (content)
⚔️ src/App/frontend/src/features/instantiate/containers/MissingRolesError.tsx (content)
⚔️ src/App/frontend/src/features/instantiate/containers/PartySelection.tsx (content)
⚔️ src/App/frontend/src/features/instantiate/selection/InstanceSelection.tsx (content)
⚔️ src/App/frontend/src/features/instantiate/useInstantiation.tsx (content)
⚔️ src/App/frontend/src/features/language/LanguageProvider.tsx (content)
⚔️ src/App/frontend/src/features/pdf/PDFWrapper.test.tsx (content)
⚔️ src/App/frontend/src/features/pdf/PdfFromLayout.tsx (content)
⚔️ src/App/frontend/src/hooks/navigation.ts (content)
⚔️ src/App/frontend/src/hooks/useNavigatePage.ts (content)
⚔️ src/App/frontend/src/index.tsx (content)
⚔️ src/App/frontend/src/layout/CustomButton/CustomButtonComponent.tsx (content)
⚔️ src/App/frontend/src/layout/FileUpload/FileUploadComponent.tsx (content)
⚔️ src/App/frontend/src/layout/GenericComponent.tsx (content)
⚔️ src/App/frontend/src/layout/InstantiationButton/InstantiationButton.test.tsx (content)
⚔️ src/App/frontend/src/layout/NavigationButtons/NavigationButtonsComponent.tsx (content)
⚔️ src/App/frontend/src/layout/RepeatingGroup/EditContainer/RepeatingGroupEditContext.tsx (content)
⚔️ src/App/frontend/src/layout/RepeatingGroup/Providers/OpenByDefaultProvider.tsx (content)
⚔️ src/App/frontend/src/layout/RepeatingGroup/Providers/RepeatingGroupFocusContext.tsx (content)
⚔️ src/App/frontend/src/layout/SigneeList/SigneeListComponent.test.tsx (content)
⚔️ src/App/frontend/src/layout/SigneeList/SigneeListComponent.tsx (content)
⚔️ src/App/frontend/src/layout/SigneeList/SigneeListSummary.test.tsx (content)
⚔️ src/App/frontend/src/layout/SigneeList/SigneeListSummary.tsx (content)
⚔️ src/App/frontend/src/layout/SigningActions/PanelAwaitingCurrentUserSignature.tsx (content)
⚔️ src/App/frontend/src/layout/SigningActions/SigningActionsComponent.test.tsx (content)
⚔️ src/App/frontend/src/layout/SigningActions/SigningActionsComponent.tsx (content)
⚔️ src/App/frontend/src/layout/SigningActions/api.ts (content)
⚔️ src/App/frontend/src/layout/SigningDocumentList/SigningDocumentListComponent.test.tsx (content)
⚔️ src/App/frontend/src/layout/SigningDocumentList/SigningDocumentListComponent.tsx (content)
⚔️ src/App/frontend/src/layout/Subform/SubformComponent.tsx (content)
⚔️ src/App/frontend/src/layout/Subform/Summary/SubformSummaryTable.tsx (content)
⚔️ src/App/frontend/src/layout/Subform/index.tsx (content)
⚔️ src/App/frontend/src/layout/Tabs/Tabs.tsx (content)
⚔️ src/App/frontend/src/queries/appPrefetcher.ts (content)
⚔️ src/App/frontend/src/setupTests.ts (content)
⚔️ src/App/frontend/src/test/renderWithProviders.tsx (content)
⚔️ src/App/frontend/src/test/routerUtils.tsx (content)
⚔️ src/App/frontend/test/e2e/support/fail-on-console-log.ts (content)
⚔️ src/App/frontend/yarn.lock (content)
⚔️ src/Designer/Dockerfile (content)
⚔️ src/Designer/backend/src/Designer/Hubs/Altinity/AltinityProxyHub.cs (content)
⚔️ src/Designer/backend/src/Designer/Infrastructure/Authorization/AuthorizationConfiguration.cs (content)
⚔️ src/Designer/backend/src/Designer/ModelBinding/Constants/AltinnPolicy.cs (content)
⚔️ src/Designer/backend/src/Designer/Services/Implementation/UserOrganizationService.cs (content)
⚔️ src/Designer/backend/src/Designer/Services/Interfaces/IUserOrganizationService.cs (content)
⚔️ src/Designer/backend/src/Designer/TypedHttpClients/MaskinPorten/MaskinPortenHttpClient.cs (content)
⚔️ src/Designer/backend/src/Designer/TypedHttpClients/TypedHttpClientRegistration.cs (content)
⚔️ src/Designer/backend/tests/Designer.Tests/Controllers/AppScopesController/GetScopesFromMaskinPortenTests.cs (content)
⚔️ src/Designer/backend/tests/Designer.Tests/Services/UserOrganizationServiceTests.cs (content)
⚔️ src/Designer/frontend/app-development/features/aiAssistant/AiAssistant.tsx (content)
⚔️ src/Designer/frontend/app-development/features/aiAssistant/hooks/index.ts (content)
⚔️ src/Designer/frontend/app-development/features/appSettings/components/TabsContent/Tabs/AboutTab/AppConfigForm/ContactPointsTable/ContactPointDialog/ContactPointDialog.test.tsx (content)
⚔️ src/Designer/frontend/app-development/features/appSettings/components/TabsContent/Tabs/AboutTab/AppConfigForm/ContactPointsTable/ContactPointDialog/ContactPointDialog.tsx (content)
⚔️ src/Designer/frontend/language/src/nb.json (content)
⚔️ src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/EditTab.tsx (content)
⚔️ src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.test.tsx (content)
⚔️ src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.tsx (content)
⚔️ src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/PublishedOptionListSelector/PublishedOptionListSelector.test.tsx (content)
⚔️ src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/PublishedOptionListSelector/PublishedOptionListSelector.tsx (content)
⚔️ src/Designer/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/OptionTabs.module.css (content)
⚔️ src/Runtime/kubernetes-wrapper/src/Dockerfile (content)
⚔️ src/Runtime/operator/test/app/Dockerfile (content)
⚔️ src/Runtime/pdf3/AGENTS.md (content)
⚔️ src/Runtime/pdf3/Dockerfile.worker (content)
⚔️ src/Runtime/pdf3/infra/kustomize/base/proxy.yaml (content)
⚔️ src/Runtime/pdf3/test/integration/simple/_snapshots/Test_CompareOldAndNew_new.pdf (content)
⚔️ src/Runtime/pdf3/test/integration/simple/_snapshots/Test_CompareOldAndNew_new.txt (content)
⚔️ src/Runtime/pdf3/test/integration/simple/_snapshots/Test_TADFormWaitFor_output.pdf (content)
⚔️ src/Runtime/pdf3/test/integration/simple/_snapshots/Test_TADFormWaitFor_output.txt (content)
⚔️ src/Runtime/pdf3/test/integration/simple/_snapshots/Test_TADForm_output.pdf (content)
⚔️ src/Runtime/pdf3/test/integration/simple/_snapshots/Test_TADForm_output.txt (content)

These conflicts must be resolved before merging into main.
Resolve conflicts locally and push changes to this branch.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: upgrading React Router to v7. The changeset confirms extensive modifications across 50+ files related to this upgrade, including dependency updates and import path changes.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore/upgrade-react-router-v7
⚔️ Resolve merge conflicts (beta)
  • Auto-commit resolved conflicts to branch chore/upgrade-react-router-v7
  • Create stacked PR with resolved conflicts
  • Post resolved changes as copyable diffs in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/App/frontend/src/components/form/Form.tsx (1)

54-56: ⚠️ Potential issue | 🟡 Minor

Pre-existing bug: setSearchParams callback returns the wrong reference.

The callback deletes from params but returns the outer searchParams object. In React Router, the callback argument is a fresh URLSearchParams instance, so the deletion on params is discarded and searchParams (which still contains Validate) is returned instead.

Proposed fix
     setSearchParams((params) => {
       params.delete(SearchParams.Validate);
-      return searchParams;
+      return params;
     });

@github-actions
Copy link
Contributor

github-actions bot commented Feb 11, 2026

🔍 Lighthouse Report

URL Performance LCP CLS TBT Link to Report
/ttd/component-library/ 26/100 🟢 34459 ms 🔴 0 🟢 3082 ms 🟢 Report

Edited

Copy link
Contributor

@olemartinorg olemartinorg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! 🥳 Strange why that test fails, but seems like it goes to the first page of the subform then immediately jumps back to the previous route and just hangs there. Not sure why, but worth investigating.

@olemartinorg olemartinorg added the taskforce/next Issues that belongs to the named task-force label Feb 11, 2026
@olemartinorg olemartinorg moved this to 🔎 In review in Team Altinn Studio Feb 11, 2026
@olemartinorg olemartinorg moved this from 🔎 In review to 👷 In progress in Team Altinn Studio Feb 11, 2026
…ing under a catch-all splat route, and replace Subform's nested Routes with param-based conditional rendering
@cammiida cammiida force-pushed the chore/upgrade-react-router-v7 branch from 4348c4b to 8675487 Compare February 16, 2026 15:00
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
src/App/frontend/src/setupTests.ts (1)

115-124: Request polyfill doesn't forward headers or body from init.

The headers field is always initialised to {}, ignoring any headers passed in init. React Router v7 may construct Request objects with headers or a body (e.g. for form submissions or loader calls). If any test exercises those paths, failures will be opaque.

Consider widening the init type and forwarding at least headers and body:

Suggested improvement
-    url: string;
-    method: string;
-    headers: Record<string, string>;
-    signal?: AbortSignal;
-    constructor(url: string, init?: { method?: string; signal?: AbortSignal }) {
-      this.url = url;
-      this.method = init?.method ?? 'GET';
-      this.headers = {};
-      this.signal = init?.signal;
+    url: string;
+    method: string;
+    headers: Record<string, string>;
+    body: BodyInit | null;
+    signal?: AbortSignal;
+    constructor(
+      url: string,
+      init?: { method?: string; headers?: Record<string, string>; body?: BodyInit | null; signal?: AbortSignal },
+    ) {
+      this.url = url;
+      this.method = init?.method ?? 'GET';
+      this.headers = init?.headers ?? {};
+      this.body = init?.body ?? null;
+      this.signal = init?.signal;
     }
src/App/frontend/src/index.tsx (1)

137-159: Consider consolidating the legacy redirect into a single route with a splat.

The two child routes (index + *) both redirect to the same target. A single splat route would suffice.

♻️ Suggested simplification
              {
                path: 'partyselection',
-               children: [
-                 {
-                   index: true,
-                   element: (
-                     <Navigate
-                       to='/party-selection'
-                       replace
-                     />
-                   ),
-                 },
-                 {
-                   path: '*',
-                   element: (
-                     <Navigate
-                       to='/party-selection'
-                       replace
-                     />
-                   ),
-                 },
-               ],
+               element: (
+                 <Navigate
+                   to='/party-selection'
+                   replace
+                 />
+               ),
              },

@cammiida cammiida merged commit 6c7833d into main Feb 17, 2026
22 checks passed
@cammiida cammiida deleted the chore/upgrade-react-router-v7 branch February 17, 2026 09:46
@github-project-automation github-project-automation bot moved this from 👷 In progress to ✅ Done in Team Altinn Studio Feb 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

kind/dependencies Used for issues or pull requests that are dependency updates skip-releasenotes Issues that do not make sense to list in our release notes skip-second-approval Pull requests that only need one approval from a reviewer. taskforce/next Issues that belongs to the named task-force

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

2 participants