deps: react-router 7.5.2 migration changes Ref: LINK-2191

mikkojamG · mikkojamG · commit 3e3e98d39856 · 2025-10-08T10:34:29.000+03:00
chore: react-router migration fixes Ref: LINK-2191
diff --git a/package.json b/package.json
@@ -25,8 +25,6 @@
     "@types/react-dom": "18.2.22",
     "@types/react-helmet": "^6.1.11",
     "@types/react-modal": "^3.16.3",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-scroll": "^1.8.10",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "apollo-link-rest": "^0.9.0",
@@ -66,7 +64,7 @@
     "react-leaflet": "^4.2.1",
     "react-modal": "^3.16.1",
     "react-router": "^7.5.2",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^7.5.2",
     "react-scroll": "^1.9.0",
     "sass": "^1.72.0",
     "typescript": "~5.4.3",
diff --git a/src/domain/accessibilityStatement/AccessibilityStatement.tsx b/src/domain/accessibilityStatement/AccessibilityStatement.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Breadcrumb from '../../common/components/breadcrumb/Breadcrumb';
 import ExternalLink from '../../common/components/externalLink/ExternalLink';
diff --git a/src/domain/app/App.tsx b/src/domain/app/App.tsx
@@ -4,7 +4,7 @@
 import { ApolloProvider } from '@apollo/client';
 import { LoginProvider } from 'hds-react';
 import React, { PropsWithChildren, useMemo } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 
 import theme from '../../assets/theme/theme';
 import { AccessibilityNotificationProvider } from '../../common/components/accessibilityNotificationContext/AccessibilityNotificationContext';
diff --git a/src/domain/app/layout/resetFocus/ResetFocus.tsx b/src/domain/app/layout/resetFocus/ResetFocus.tsx
@@ -5,7 +5,7 @@ import useLocale from '../../../../hooks/useLocale';
 
 /**
  * Ensure that browser focus is set to body when navigating using
- * <Link> from react-router-dom.
+ * <Link> from react-router.
  */
 interface Props {
   disabled?: boolean;
diff --git a/src/domain/app/layout/scrollToTop/ScrollToTop.tsx b/src/domain/app/layout/scrollToTop/ScrollToTop.tsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router';
 
 /**
  * Ensure that browser scrolls to top when navigating using
- * <Link> from react-router-dom.
+ * <Link> from react-router.
  *
  * Implementation fetched from
  * https://reacttraining.com/react-router/web/guides/scroll-restoration
diff --git a/src/domain/app/routes/localeRoutes/__tests__/LocaleRoutes.test.tsx b/src/domain/app/routes/localeRoutes/__tests__/LocaleRoutes.test.tsx
@@ -2,7 +2,7 @@
 import { MockedResponse } from '@apollo/client/testing';
 import { History } from 'history';
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 
 import { mockedRegistrationEventSelectorEventsResponse } from '../../../../../common/components/formFields/registrationEventSelectorField/__mocks__/registrationEventSelectorField';
 import { mockedKeywordsResponse as mockedKeywordSelectorKeywordsResponse } from '../../../../../common/components/keywordSelector/__mocks__/keywordSelector';
diff --git a/src/domain/dataSource/hooks/__tests__/useAllDataSources.test.tsx b/src/domain/dataSource/hooks/__tests__/useAllDataSources.test.tsx
@@ -6,7 +6,7 @@ import { createMemoryHistory } from 'history';
 import map from 'lodash/map';
 import range from 'lodash/range';
 import { PropsWithChildren } from 'react';
-import { unstable_HistoryRouter as Router } from 'react-router-dom';
+import { unstable_HistoryRouter as Router } from 'react-router';
 
 import { DataSourcesDocument, Meta } from '../../../../generated/graphql';
 import { fakeDataSources } from '../../../../utils/mockDataUtils';
diff --git a/src/domain/event/formSections/linksToEventsSection/LinksToEventsSection.tsx b/src/domain/event/formSections/linksToEventsSection/LinksToEventsSection.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 
 import { EventFieldsFragment } from '../../../../generated/graphql';
 import useLocale from '../../../../hooks/useLocale';
diff --git a/src/domain/event/formSections/registrationSection/RegistrationSection.tsx b/src/domain/event/formSections/registrationSection/RegistrationSection.tsx
@@ -2,7 +2,7 @@ import { useField } from 'formik';
 import { IconPlus } from 'hds-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 
 import Button from '../../../../common/components/button/Button';
 import { ROUTES } from '../../../../constants';
diff --git a/src/domain/event/formSections/typeSection/umbrellaEventInstructions/UmbrellaEventInstructions.tsx b/src/domain/event/formSections/typeSection/umbrellaEventInstructions/UmbrellaEventInstructions.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { ROUTES } from '../../../../../constants';
 import {
diff --git a/src/domain/event/hooks/__tests__/useEventActions.test.tsx b/src/domain/event/hooks/__tests__/useEventActions.test.tsx
@@ -3,7 +3,7 @@ import { MockedProvider, MockedResponse } from '@apollo/client/testing';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { PropsWithChildren } from 'react';
-import { unstable_HistoryRouter as Router } from 'react-router-dom';
+import { unstable_HistoryRouter as Router } from 'react-router';
 
 import {
   EventFieldsFragment,
diff --git a/src/domain/event/hooks/__tests__/useUpdateImageIfNeeded.test.tsx b/src/domain/event/hooks/__tests__/useUpdateImageIfNeeded.test.tsx
@@ -3,7 +3,7 @@ import { MockedProvider, MockedResponse } from '@apollo/client/testing';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { PropsWithChildren } from 'react';
-import { unstable_HistoryRouter as Router } from 'react-router-dom';
+import { unstable_HistoryRouter as Router } from 'react-router';
 
 import { UpdateImageDocument } from '../../../../generated/graphql';
 import generateAtId from '../../../../utils/generateAtId';
diff --git a/src/domain/event/hooks/__tests__/useUpdateRecurringEventIfNeeded.test.tsx b/src/domain/event/hooks/__tests__/useUpdateRecurringEventIfNeeded.test.tsx
@@ -6,7 +6,7 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import omit from 'lodash/omit';
 import { PropsWithChildren } from 'react';
-import { unstable_HistoryRouter as Router } from 'react-router-dom';
+import { unstable_HistoryRouter as Router } from 'react-router';
 
 import { EMPTY_MULTI_LANGUAGE_OBJECT } from '../../../../constants';
 import {
diff --git a/src/domain/events/eventsTable/eventsTableRow/EventsTableRow.tsx b/src/domain/events/eventsTable/eventsTableRow/EventsTableRow.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { FC, PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import CollapseButton from '../../../../common/components/table/collapseButton/CollapseButton';
 import { EventFieldsFragment } from '../../../../generated/graphql';
diff --git a/src/domain/help/pages/sourceCodePage/SourceCodePage.tsx b/src/domain/help/pages/sourceCodePage/SourceCodePage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Breadcrumb from '../../../../common/components/breadcrumb/Breadcrumb';
 import ExternalLink from '../../../../common/components/externalLink/ExternalLink';
diff --git a/src/domain/images/imagesTable/ImagesTable.tsx b/src/domain/images/imagesTable/ImagesTable.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { IconPhoto } from 'hds-react';
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Table from '../../../common/components/table/Table';
 import { ImageFieldsFragment, ImagesQuery } from '../../../generated/graphql';
diff --git a/src/domain/keywordSets/keywordSetsTable/KeywordSetsTable.tsx b/src/domain/keywordSets/keywordSetsTable/KeywordSetsTable.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Table from '../../../common/components/table/Table';
 import {
diff --git a/src/domain/keywords/keywordsTable/KeywordsTable.tsx b/src/domain/keywords/keywordsTable/KeywordsTable.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Table from '../../../common/components/table/Table';
 import {
diff --git a/src/domain/organization/organizationForm/subOrganizationTable/SubOrganizationTable.tsx b/src/domain/organization/organizationForm/subOrganizationTable/SubOrganizationTable.tsx
@@ -1,7 +1,7 @@
 import orderBy from 'lodash/orderBy';
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import LoadingSpinner from '../../../../common/components/loadingSpinner/LoadingSpinner';
 import Table from '../../../../common/components/table/Table';
diff --git a/src/domain/organizationClass/hooks/__tests__/useAllOrganizationClasses.test.tsx b/src/domain/organizationClass/hooks/__tests__/useAllOrganizationClasses.test.tsx
@@ -6,7 +6,7 @@ import { createMemoryHistory } from 'history';
 import map from 'lodash/map';
 import range from 'lodash/range';
 import { PropsWithChildren } from 'react';
-import { unstable_HistoryRouter as Router } from 'react-router-dom';
+import { unstable_HistoryRouter as Router } from 'react-router';
 
 import {
   Meta,
diff --git a/src/domain/organizations/organizationsTable/organizationsTableRow/OrganizationsTableRow.tsx b/src/domain/organizations/organizationsTable/organizationsTableRow/OrganizationsTableRow.tsx
@@ -1,8 +1,7 @@
 import omit from 'lodash/omit';
 import React, { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router';
 
 import CollapseButton from '../../../../common/components/table/collapseButton/CollapseButton';
 import { OrganizationFieldsFragment } from '../../../../generated/graphql';
diff --git a/src/domain/places/placesTable/PlacesTable.tsx b/src/domain/places/placesTable/PlacesTable.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Table from '../../../common/components/table/Table';
 import { PlaceFieldsFragment, PlacesQuery } from '../../../generated/graphql';
diff --git a/src/domain/priceGroups/priceGroupsTable/PriceGroupsTable.tsx b/src/domain/priceGroups/priceGroupsTable/PriceGroupsTable.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Table from '../../../common/components/table/Table';
 import {
diff --git a/src/domain/registration/eventLink/EventLink.tsx b/src/domain/registration/eventLink/EventLink.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { RegistrationFieldsFragment } from '../../../generated/graphql';
 import useLocale from '../../../hooks/useLocale';
diff --git a/src/domain/registrations/registrationsTable/RegistrationsTable.tsx b/src/domain/registrations/registrationsTable/RegistrationsTable.tsx
@@ -1,7 +1,7 @@
 import isNumber from 'lodash/isNumber';
 import React, { FC, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Table from '../../../common/components/table/Table';
 import {
diff --git a/src/domain/signupGroup/signupGroupFormFields/SignupGroupFormFields.tsx b/src/domain/signupGroup/signupGroupFormFields/SignupGroupFormFields.tsx
@@ -1,7 +1,7 @@
 import { Field, useField } from 'formik';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import Fieldset from '../../../common/components/fieldset/Fieldset';
 import CheckboxGroupField from '../../../common/components/formFields/checkboxGroupField/CheckboxGroupField';
diff --git a/src/domain/signups/signupsTable/SignupsTable.tsx b/src/domain/signups/signupsTable/SignupsTable.tsx
@@ -2,8 +2,7 @@ import { StatusLabel } from 'hds-react';
 import omit from 'lodash/omit';
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router';
 
 import LoadingSpinner from '../../../common/components/loadingSpinner/LoadingSpinner';
 import Pagination from '../../../common/components/pagination/Pagination';
diff --git a/src/domain/user/hooks/__tests__/useAllUsers.test.tsx b/src/domain/user/hooks/__tests__/useAllUsers.test.tsx
@@ -6,7 +6,7 @@ import { createMemoryHistory } from 'history';
 import map from 'lodash/map';
 import range from 'lodash/range';
 import { PropsWithChildren } from 'react';
-import { unstable_HistoryRouter as Router } from 'react-router-dom';
+import { unstable_HistoryRouter as Router } from 'react-router';
 
 import { MAX_PAGE_SIZE } from '../../../../constants';
 import { Meta, UsersDocument } from '../../../../generated/graphql';
diff --git a/src/utils/testUtils.tsx b/src/utils/testUtils.tsx
@@ -18,11 +18,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import { createMemoryHistory, History } from 'history';
 import React, { ReducerAction } from 'react';
-import {
-  Route,
-  Routes,
-  unstable_HistoryRouter as Router,
-} from 'react-router-dom';
+import { Route, Routes, unstable_HistoryRouter as Router } from 'react-router';
 import { Mock, MockInstance } from 'vitest';
 import wait from 'waait';
 
diff --git a/yarn.lock b/yarn.lock
@@ -3360,11 +3360,6 @@
   resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.22.1.tgz#4e5de032fcb0b7bca50f6a9f8e133fd882821930"
   integrity sha512-PCpa+Vo6BKnRMuOEzy5zAZ3/H5tnQg1e80khMhK2xys0j6ZqzkgQC+fHMNZ7VDFNLqqNMj/o0eVeSBDh2POjkw==
 
-"@remix-run/router@1.15.3":
-  version "1.15.3"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.15.3.tgz#d2509048d69dbb72d5389a14945339f1430b2d3c"
-  integrity sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==
-
 "@repeaterjs/repeater@^3.0.4":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.5.tgz#b77571685410217a548a9c753aa3cdfc215bfc78"
@@ -3861,11 +3856,6 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
   integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
 
-"@types/history@^4.7.11":
-  version "4.7.11"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
@@ -3972,23 +3962,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-router-dom@^5.3.3":
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*", "@types/react-router@^5.1.20":
-  version "5.1.20"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
-  integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-
 "@types/react-scroll@^1.8.10":
   version "1.8.10"
   resolved "https://registry.yarnpkg.com/@types/react-scroll/-/react-scroll-1.8.10.tgz#585a5c4bd0654434f3e55a08e94ed2e048bae7c7"
@@ -8850,20 +8823,20 @@ react-popper@2.2.5:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-router-dom@^6.22.3:
-  version "6.22.3"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691"
-  integrity sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==
+react-router-dom@^7.5.2:
+  version "7.9.3"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.9.3.tgz#67ab1655f67b9b6108fe20ed3d4881b53dccf87a"
+  integrity sha512-1QSbA0TGGFKTAc/aWjpfW/zoEukYfU4dc1dLkT/vvf54JoGMkW+fNA+3oyo2gWVW1GM7BxjJVHz5GnPJv40rvg==
   dependencies:
-    "@remix-run/router" "1.15.3"
-    react-router "6.22.3"
+    react-router "7.9.3"
 
-react-router@6.22.3:
-  version "6.22.3"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.22.3.tgz#9d9142f35e08be08c736a2082db5f0c9540a885e"
-  integrity sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==
+react-router@7.9.3:
+  version "7.9.3"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.9.3.tgz#f2d5ff6181851de3df3acb4e7364fce0dee5fba2"
+  integrity sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==
   dependencies:
-    "@remix-run/router" "1.15.3"
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
 
 react-router@^7.5.2:
   version "7.5.2"

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { useLocation } from 'react-router';`
`3`	`3`
`4`	`4`	`/**`
`5`	`5`	`* Ensure that browser scrolls to top when navigating using`
`6`		`- * <Link> from react-router-dom.`
	`6`	`+ * <Link> from react-router.`
`7`	`7`	`*`
`8`	`8`	`* Implementation fetched from`
`9`	`9`	`* https://reacttraining.com/react-router/web/guides/scroll-restoration`