fix(deps): update react-router monorepo to v6 (major) #3563

asajjad2 · 2025-06-27T07:21:40Z

What are the relevant tickets?

Description (What does it do?)

This PR upgrades react-router-dom and react-router from v4 to v6. The upgrade includes updating all routing-related code to use the new v6 API while maintaining compatibility with our existing React 16.8+ setup.

Key changes include:

replacing Switch components with Routes
updating Redirect to Navigate
converting useHistory() calls to useNavigate()
updating route definitions to use the new element prop instead of component prop.

All existing routing functionality has been preserved with the new API.

How can this be tested?

Test all major navigation flows in the application:

Navigate through the main application routes (home, dashboard, profile, blog, etc.)
Test any redirects (login redirects, private routes)
Verify browser back/forward buttons work correctly
Test any programmatic navigation (form submissions, button clicks that trigger navigation)
Check that route parameters and query strings are handled properly on course catalogue page

gemini-code-assist

Summary of Changes

Hello @asajjad2, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request performs a substantial upgrade of the application's routing system by migrating from React Router v4 to v6. This involves a comprehensive refactoring of how routes are defined and handled throughout the codebase, ensuring compatibility with the new major version's API while preserving all existing navigation functionality.

Highlights

Dependency Upgrade: Upgraded react-router and react-router-dom from version 4 to version 6 (specifically 6.30.1), which is a major version update requiring significant API changes.
API Modernization: Replaced Switch components with Routes, Redirect components with Navigate, and updated Route definitions to use the element prop instead of the component prop, aligning with React Router v6's new API.
Hooks Adoption: Converted the ScrollToTop class component to a functional component, leveraging React Hooks (useEffect, useLocation) for managing scroll behavior based on route changes, replacing the withRouter HOC.
Routing Logic Adaptation: Modified the PrivateRoute component's usage pattern to align with React Router v6, where it now wraps child components as elements (<PrivateRoute><ChildComponent /></PrivateRoute>) rather than rendering them directly via the component prop.
Test Updates: Adjusted existing tests, particularly for PrivateRoute, to reflect the new Navigate component and updated assertions for Link components in registration pages.
Route Path Refinements: Several route paths within the application, especially in admin, B2B, and login/registration sections, were refined for consistency and clarity.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request upgrades react-router-dom and react-router from v4 to v6. The upgrade includes updating all routing-related code to use the new v6 API. There are several components that need to be updated to be compatible with React Router v6.

gemini-code-assist · 2025-06-27T07:24:36Z

static/js/Router.js

 }

-export const routes = <Route url="/" component={withTracker(App)} />
+export const routes = <Route url="/" element={<TrackedApp />} />


The url prop on the <Route> component is not valid in React Router v6. It should be replaced with the path prop.

Suggested change

export const routes = <Route url="/" element={<TrackedApp />} />

export const routes = <Route path="/" element={<TrackedApp />} />

gemini-code-assist · 2025-06-27T07:24:36Z

static/js/containers/pages/login/LoginPages.js

+      exact
+      path={routes.login.forgot.begin}
+      element={<ForgotPasswordPages />}


The ForgotPasswordPages component is rendered as an element of a Route, but it contains its own Route. This is not valid in React Router v6. The nested routes should be flattened into the parent Routes component.

<Route exact path={routes.login.forgot.begin} element={<LoginForgotPasswordPage />} />

gemini-code-assist · 2025-06-27T07:24:36Z

static/js/containers/App.js

-        <Switch>
-          <PrivateRoute
-            exact
+        <Routes>


The <Switch> component has been replaced with <Routes> in React Router v6.

<Routes>

gemini-code-assist · 2025-06-27T07:24:36Z

static/js/containers/pages/admin/EcommerceAdminPages.js

 const EcommerceAdminPages = () => (
  <React.Fragment>
-    <Switch>
+    <Routes>


The <Switch> component has been replaced with <Routes> in React Router v6.

Suggested change

<Routes>

<Routes>

gemini-code-assist · 2025-06-27T07:24:36Z

static/js/containers/pages/login/LoginPages.js

+    <Route
+      exact
+      path={routes.login.forgot.password}
+      element={<LoginForgotPasswordPage />}


There is a new route being added here that is not defined in the routes object. Please define routes.login.forgot.password in static/js/lib/urls.js.

Anas12091101 · 2025-07-02T06:24:10Z

@asajjad2 Could you please rebase this PR and take a look at the issues flagged in the Gemini review to see if they can be addressed?

asajjad2 · 2025-07-04T05:40:39Z

We've encountered several key issues after following the migration guide which was preventing rendering of various components:

replacing the url prop with path
fixing improper nesting of Route components, removing the exact prop (v6 matches exactly by default)
ensuring Route(s) are only rendered inside Routes.

I've refactored our PrivateRoute from a custom route to a wrapper component and updated parent routes to include trailing wildcards (*) for nested routing.

There are also Hot reloading conflicts with react-hot-loader which required temporary disabling, this might need migrating to React Fast Refresh. Prop access changes meant components no longer automatically received history/location/match props, forcing us to use hooks like useNavigate/useLocation or create wrapper components for class components. I've replaced all history.push() calls with the new navigate() function.

API changes included replacing the component prop with element (requiring JSX), replacing with , and updating query parameter handling. Route matching has became stricter, breaking a lot existing patterns.

Some components are still breaking mainly due to route nesting and private route conflicts, the solution to which I'm looking into.

Anas12091101 · 2025-07-07T10:35:27Z

@asajjad2 should we mark this PR as blocked?

gemini-code-assist bot reviewed Jun 27, 2025

View reviewed changes

asajjad2 marked this pull request as ready for review June 27, 2025 07:23

asajjad2 added the Needs Review label Jun 27, 2025

gemini-code-assist bot reviewed Jun 27, 2025

View reviewed changes

asajjad2 mentioned this pull request Jun 27, 2025

fix(deps): update react-router monorepo to v7 (major) #3541

Closed

1 task

Anas12091101 self-assigned this Jul 2, 2025

Anas12091101 added Waiting on Author and removed Needs Review labels Jul 2, 2025

asajjad2 added 13 commits July 2, 2025 12:31

fix(deps): update react-router monorepo to v6

20fdfc4

test: update register page tests for react-router-dom v7+ compatability

ef52ab2

style: prettier errors

1991bd9

test: fix register page tests for react-router v7

40d9fde

refactor: replace withRouter in ScrollToTop with useLocation hook

7744dd5

refactor: use BrowserRouter from react-router-dom in Router.js

e6e0d74

fix: import Route in Router.js

c1e27e5

refactor: replace Switch with Routes

2a7ec5a

refactor: replace Redirect with Navigate

e87b2bb

test: update PrivateRoute test to expect Navigate instead of Redirect

5b6e911

refactor: update Route component/render to element prop

f39f2a8

fix: wrap withTracker(App) in a component for Route element in Router.js

b5d6f75

refactor: flatten forgotpassword routes, replace url with path

c5a305a

asajjad2 force-pushed the areeb/react-router-upgrade-v6 branch from 1669620 to c5a305a Compare July 2, 2025 07:46

chore: ran yarn install

ed202b5

asajjad2 added Needs Review and removed Waiting on Author labels Jul 2, 2025

Anas12091101 added Waiting on Author and removed Needs Review labels Jul 2, 2025

Anas12091101 removed their assignment Jul 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(deps): update react-router monorepo to v6 (major) #3563

fix(deps): update react-router monorepo to v6 (major) #3563

Uh oh!

asajjad2 commented Jun 27, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Jun 27, 2025

Uh oh!

gemini-code-assist bot Jun 27, 2025

Uh oh!

gemini-code-assist bot Jun 27, 2025

Uh oh!

gemini-code-assist bot Jun 27, 2025

Uh oh!

gemini-code-assist bot Jun 27, 2025

Uh oh!

Anas12091101 commented Jul 2, 2025

Uh oh!

asajjad2 commented Jul 4, 2025

Uh oh!

Anas12091101 commented Jul 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	export const routes = <Route url="/" element={<TrackedApp />} />
	export const routes = <Route path="/" element={<TrackedApp />} />

fix(deps): update react-router monorepo to v6 (major) #3563

Are you sure you want to change the base?

fix(deps): update react-router monorepo to v6 (major) #3563

Uh oh!

Conversation

asajjad2 commented Jun 27, 2025

What are the relevant tickets?

Description (What does it do?)

How can this be tested?

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

Anas12091101 commented Jul 2, 2025

Uh oh!

asajjad2 commented Jul 4, 2025

Uh oh!

Anas12091101 commented Jul 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants