fix(deps): update dependency react-router-dom to v7 (#3194)

renovate[bot] · RichDom2185 · web-flow · commit ad5d43ac6562 · 2025-06-27T17:19:22.000Z
* fix(deps): update dependency react-router-dom to v7

* Remove future flag post-upgrade

* Fix breaking changes

* Use react-router instead of react-router-dom

* Fix format

* Fix test setup

* Update test snapshots

* Fix missed dependency substitution

* Fix old test API

---------

Co-authored-by: renovate[bot] &lt;29139614+renovate[bot]@users.noreply.github.com&gt;
Co-authored-by: Richard Dominick &lt;34370238+RichDom2185@users.noreply.github.com&gt;
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "react-papaparse": "^4.0.2",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.1",
+    "react-router": "^7.6.2",
     "react-select": "^5.7.3",
     "react-simple-keyboard": "^3.6.27",
     "react-sortable-hoc": "^2.0.0",
diff --git a/src/commons/ReactRouterPrompt.tsx b/src/commons/ReactRouterPrompt.tsx
@@ -1,14 +1,14 @@
 /**
  * Intermediate implementation of deprecated <Prompt /> component
- * from react-router-dom's v5 to v6 upgrade.
+ * from react-router's v5 to v6 upgrade.
  *
- * react-router-dom plans to bring <Prompt /> back in the future. Until then,
+ * react-router plans to bring <Prompt /> back in the future. Until then,
  * we can use this suggested implementation.
  *
  * See: https://github.com/remix-run/react-router/issues/8139#issuecomment-1382428200
  */
 import React from 'react';
-import { useBeforeUnload, useBlocker } from 'react-router-dom';
+import { useBeforeUnload, useBlocker } from 'react-router';
 
 // You can abstract `useBlocker` to use the browser's `window.confirm` dialog to
 // determine whether or not the user should navigate within the current origin.
diff --git a/src/commons/application/Application.tsx b/src/commons/application/Application.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import Messages, {
   MessageType,
   MessageTypeNames,
diff --git a/src/commons/application/ApplicationWrapper.tsx b/src/commons/application/ApplicationWrapper.tsx
@@ -3,8 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { RouterProvider } from 'react-router';
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router';
 import { getAcademyRoutes } from 'src/pages/academy/academyRoutes';
 
 import { getFullAcademyRouterConfig, playgroundOnlyRouterConfig } from '../../routes/routerConfig';
@@ -38,9 +37,7 @@ const ApplicationWrapper: React.FC = () => {
       ? playgroundOnlyRouterConfig
       : getFullAcademyRouterConfig({ name, isLoggedIn, courseId, academyRoutes });
 
-    const r = createBrowserRouter(routerConfig, {
-      future: { v7_relativeSplatPath: true }
-    });
+    const r = createBrowserRouter(routerConfig);
     dispatch(updateReactRouter(r));
 
     return r;
diff --git a/src/commons/application/actions/CommonsActions.ts b/src/commons/application/actions/CommonsActions.ts
@@ -1,4 +1,4 @@
-import { Router } from '@remix-run/router';
+import { Router } from 'src/commons/application/types/CommonsTypes';
 import { createActions } from 'src/commons/redux/utils';
 
 const CommonsActions = createActions('commons', {
diff --git a/src/commons/application/types/CommonsTypes.ts b/src/commons/application/types/CommonsTypes.ts
@@ -1,3 +1,4 @@
-import { Router } from '@remix-run/router';
+import type { createBrowserRouter } from 'react-router';
 
+export type Router = ReturnType<typeof createBrowserRouter>;
 export type RouterState = Router | null;
diff --git a/src/commons/assessment/Assessment.tsx b/src/commons/assessment/Assessment.tsx
@@ -22,8 +22,7 @@ import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { Navigate, useLoaderData, useParams } from 'react-router';
-import { NavLink } from 'react-router-dom';
+import { Navigate, NavLink, useLoaderData, useParams } from 'react-router';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
 import classes from 'src/styles/Academy.module.scss';
 
diff --git a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
@@ -493,6 +493,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/3/0"
                         onClick={[Function]}
                       >
@@ -715,6 +716,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/2/0"
                         onClick={[Function]}
                       >
@@ -1090,6 +1092,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/1/0"
                         onClick={[Function]}
                       >
@@ -1354,6 +1357,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/3/0"
                         onClick={[Function]}
                       >
@@ -1576,6 +1580,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
                     >
                       <a
                         className=""
+                        data-discover="true"
                         href="/courses/undefined/missions/2/0"
                         onClick={[Function]}
                       >
diff --git a/src/commons/dropdown/DropdownSettings.tsx b/src/commons/dropdown/DropdownSettings.tsx
@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { EditorBinding, WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
 import LocaleSelector from './LocaleSelector';
diff --git a/src/commons/editingOverviewCard/EditingOverviewCard.tsx b/src/commons/editingOverviewCard/EditingOverviewCard.tsx
@@ -16,7 +16,7 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import React, { useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import Textarea from 'react-textarea-autosize';
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg';
diff --git a/src/commons/navigationBar/NavigationBar.tsx b/src/commons/navigationBar/NavigationBar.tsx
@@ -16,7 +16,7 @@ import { IconName, IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { Translation } from 'react-i18next';
-import { Location, NavLink, Route, Routes, useLocation } from 'react-router-dom';
+import { Location, NavLink, Route, Routes, useLocation } from 'react-router';
 import { i18nDefaultLangKeys } from 'src/i18n/i18next';
 import classes from 'src/styles/NavigationBar.module.scss';
 
diff --git a/src/commons/navigationBar/__tests__/NavigationBar.tsx b/src/commons/navigationBar/__tests__/NavigationBar.tsx
@@ -1,12 +1,12 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import { shallowRender } from 'src/commons/utils/TestUtils';
 
 import { Role } from '../../application/ApplicationTypes';
 import NavigationBar from '../NavigationBar';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: jest.fn()
 }));
 jest.mock('react-redux', () => ({
diff --git a/src/commons/navigationBar/subcomponents/__tests__/SicpNavigationBar.tsx b/src/commons/navigationBar/subcomponents/__tests__/SicpNavigationBar.tsx
@@ -1,12 +1,14 @@
-import * as ReactRouter from 'react-router';
 import { shallowRender } from 'src/commons/utils/TestUtils';
 
 import SicpNavigationBar from '../SicpNavigationBar';
 
-test('Navbar renders correctly', () => {
-  jest.spyOn(ReactRouter, 'useParams').mockReturnValue({ section: 'index' });
-  jest.spyOn(ReactRouter, 'useNavigate').mockReturnValue(jest.fn());
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useParams: jest.fn().mockReturnValue({ section: 'index' }),
+  useNavigate: jest.fn().mockReturnValue(jest.fn())
+}));
 
+test('Navbar renders correctly', () => {
   const navbar = <SicpNavigationBar />;
   const tree = shallowRender(navbar);
   expect(tree).toMatchSnapshot();
diff --git a/src/commons/profile/ProfileCard.tsx b/src/commons/profile/ProfileCard.tsx
@@ -1,7 +1,7 @@
 import { Callout, ProgressBar } from '@blueprintjs/core';
 import { IconName } from '@blueprintjs/icons';
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { AssessmentOverview, AssessmentType } from '../assessment/AssessmentTypes';
 import { assessmentTypeLink } from '../utils/ParamParseHelper';
diff --git a/src/commons/sideContent/content/remoteExecution/SideContentRemoteExecution.tsx b/src/commons/sideContent/content/remoteExecution/SideContentRemoteExecution.tsx
@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames';
 import React, { SetStateAction, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import BrickSvg from 'src/assets/BrickSvg';
 import PortSvg from 'src/assets/PortSvg';
 import { deleteDevice } from 'src/commons/sagas/RequestsSaga';
diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
@@ -1,7 +1,7 @@
 import { Blockquote, Code, H1, H2, H4, Icon, OL, Pre, UL } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Constants from 'src/commons/utils/Constants';
 import SicpExercise from 'src/pages/sicp/subcomponents/SicpExercise';
 import SicpLatex from 'src/pages/sicp/subcomponents/SicpLatex';
diff --git a/src/features/sicp/parser/__tests__/ParseJson.tsx b/src/features/sicp/parser/__tests__/ParseJson.tsx
@@ -1,5 +1,5 @@
 import lzString from 'lz-string';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { renderTreeJson } from 'src/commons/utils/TestUtils';
 import { CodeSnippetProps } from 'src/pages/sicp/subcomponents/CodeSnippet';
 
diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
@@ -197,6 +197,7 @@ exports[`Parse figures FIGURE with image and scale successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -247,6 +248,7 @@ exports[`Parse figures FIGURE with image successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -297,6 +299,7 @@ exports[`Parse figures FIGURE with snippet successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -345,6 +348,7 @@ exports[`Parse figures FIGURE with table successful 1`] = `
 >
   <a
     className="sicp-anchor-link"
+    data-discover="true"
     href="/id"
     onClick={[Function]}
     style={
@@ -485,6 +489,7 @@ exports[`Parse latex LATEX inline successful 1`] = `
 exports[`Parse links FOOTNOTE_REF  successful 1`] = `
 <sup>
   <a
+    data-discover="true"
     href="/bad-link"
     onClick={[Function]}
   >
@@ -503,6 +508,7 @@ exports[`Parse links LINK  successful 1`] = `
 
 exports[`Parse links REF  successful 1`] = `
 <a
+  data-discover="true"
   href="/bad-link"
   onClick={[Function]}
 >
diff --git a/src/pages/academy/Academy.tsx b/src/pages/academy/Academy.tsx
@@ -41,7 +41,8 @@ const CourseSelectingAcademy: React.FC = () => {
   React.useEffect(() => {
     // Regex to handle case where routeCourseIdStr is not a number
     if (!routeCourseIdStr?.match(numberRegExp)) {
-      return navigate('/');
+      navigate('/');
+      return;
     }
 
     if (routeCourseId !== undefined && !Number.isNaN(routeCourseId) && courseId !== routeCourseId) {
diff --git a/src/pages/academy/grading/subcomponents/GradingActions.tsx b/src/pages/academy/grading/subcomponents/GradingActions.tsx
@@ -2,7 +2,7 @@ import { Button, Icon, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { ProgressStatus, ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 import GradingFlex from 'src/commons/grading/GradingFlex';
diff --git a/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx b/src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx
@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 import GradingFlex from 'src/commons/grading/GradingFlex';
 import GradingText from 'src/commons/grading/GradingText';
diff --git a/src/pages/academy/teamFormation/subcomponents/TeamFormationActions.tsx b/src/pages/academy/teamFormation/subcomponents/TeamFormationActions.tsx
@@ -3,7 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { Flex, Icon } from '@tremor/react';
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { useSession } from 'src/commons/utils/Hooks';
diff --git a/src/pages/academy/teamFormation/subcomponents/TeamFormationForm.tsx b/src/pages/academy/teamFormation/subcomponents/TeamFormationForm.tsx
@@ -3,8 +3,7 @@ import '@tremor/react/dist/esm/tremor.css';
 import { Button } from '@blueprintjs/core';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router';
-import { Form, useParams } from 'react-router-dom';
+import { Form, useNavigate, useParams } from 'react-router';
 import Select, { ActionMeta, MultiValue } from 'react-select';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { User } from 'src/commons/application/types/SessionTypes';
diff --git a/src/pages/academy/teamFormation/subcomponents/TeamFormationImport.tsx b/src/pages/academy/teamFormation/subcomponents/TeamFormationImport.tsx
@@ -4,8 +4,7 @@ import { Button } from '@blueprintjs/core';
 import { useState } from 'react';
 import { FileUploader } from 'react-drag-drop-files';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router';
-import { Form } from 'react-router-dom';
+import { Form, useNavigate } from 'react-router';
 import Select from 'react-select';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { AssessmentOverview } from 'src/commons/assessment/AssessmentTypes';
diff --git a/src/pages/githubCallback/__tests__/GitHubCallback.tsx b/src/pages/githubCallback/__tests__/GitHubCallback.tsx
@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { MockedFunction } from 'jest-mock';
 import { act } from 'react';
-import { Route, Routes } from 'react-router';
-import { StaticRouter } from 'react-router-dom/server';
+import { Route, Routes, StaticRouter } from 'react-router';
 
 import Constants from '../../../commons/utils/Constants';
 import { exchangeAccessCode } from '../../../features/github/GitHubUtils';
diff --git a/src/pages/login/__tests__/Login.tsx b/src/pages/login/__tests__/Login.tsx
diff --git a/src/pages/playground/__tests__/Playground.tsx b/src/pages/playground/__tests__/Playground.tsx
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
diff --git a/src/pages/sicp/__tests__/Sicp.tsx b/src/pages/sicp/__tests__/Sicp.tsx
diff --git a/src/pages/stories/Stories.tsx b/src/pages/stories/Stories.tsx
diff --git a/src/pages/stories/StoryActions.tsx b/src/pages/stories/StoryActions.tsx
diff --git a/src/setupTests.ts b/src/setupTests.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Router } from '@remix-run/router';`
	`1`	`+import { Router } from 'src/commons/application/types/CommonsTypes';`
`2`	`2`	`import { createActions } from 'src/commons/redux/utils';`
`3`	`3`
`4`	`4`	`const CommonsActions = createActions('commons', {`
Original file line number	Diff line number	Diff line change
@@ -493,6 +493,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
`493`	`493`	`>`
`494`	`494`	`<a`
`495`	`495`	`className=""`
	`496`	`+ data-discover="true"`
`496`	`497`	`href="/courses/undefined/missions/3/0"`
`497`	`498`	`onClick={[Function]}`
`498`	`499`	`>`
@@ -715,6 +716,7 @@ exports[`Assessment page does not show attempt Button for upcoming assessments f
`715`	`716`	`>`
`716`	`717`	`<a`
`717`	`718`	`className=""`
	`719`	`+ data-discover="true"`
`718`	`720`	`href="/courses/undefined/missions/2/0"`
`719`	`721`	`onClick={[Function]}`
`720`	`722`	`>`
@@ -1090,6 +1092,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
`1090`	`1092`	`>`
`1091`	`1093`	`<a`
`1092`	`1094`	`className=""`
	`1095`	`+ data-discover="true"`
`1093`	`1096`	`href="/courses/undefined/missions/1/0"`
`1094`	`1097`	`onClick={[Function]}`
`1095`	`1098`	`>`
@@ -1354,6 +1357,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
`1354`	`1357`	`>`
`1355`	`1358`	`<a`
`1356`	`1359`	`className=""`
	`1360`	`+ data-discover="true"`
`1357`	`1361`	`href="/courses/undefined/missions/3/0"`
`1358`	`1362`	`onClick={[Function]}`
`1359`	`1363`	`>`
@@ -1576,6 +1580,7 @@ exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
`1576`	`1580`	`>`
`1577`	`1581`	`<a`
`1578`	`1582`	`className=""`
	`1583`	`+ data-discover="true"`
`1579`	`1584`	`href="/courses/undefined/missions/2/0"`
`1580`	`1585`	`onClick={[Function]}`
`1581`	`1586`	`>`