5th: react-router upgrade to react-router-dom
#9134
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
camd
requested review from
a team,
beatrice-acasandrei and
esanuandra
as code owners
camd
force-pushed
the
camd/react-router-upgrade
branch
from
59583ba to
c64c6a8
Compare
…use safer approach.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #9134 +/- ##
==========================================
+ Coverage 80.01% 81.50% +1.48%
==========================================
Files 601 605 +4
Lines 32715 34000 +1285
Branches 3314 3270 -44
==========================================
+ Hits 26178 27712 +1534
+ Misses 6371 5915 -456
- Partials 166 373 +207 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
camd
force-pushed
the
camd/react-router-upgrade
branch
from
c64c6a8 to
cd39d89
Compare
camd
force-pushed
the
camd/react-router-upgrade
branch
from
cd39d89 to
9c5f93f
Compare
The withView HOC is a class component that expected location and history props to be passed automatically by React Router. In React Router v6, these are no longer passed - you must use hooks instead. This caused the error: "Cannot read properties of undefined (reading 'state')" at line 21: this.default = this.props.location.state || defaultState; Fix by creating a ViewWithRouter wrapper component that: - Uses useLocation() and useNavigate() hooks - Injects location and navigate as props to the class component - Creates a history-like object with push/replace for backwards compatibility Also adds unit tests to verify the intermittent-failures routes render correctly with React Router v6. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace the withView class-based Higher Order Component with a modern useIntermittentFailuresData custom hook. This eliminates the need for the ViewWithRouter wrapper and makes the code more readable and testable. Changes: - Create useIntermittentFailuresData.jsx custom hook that encapsulates all state management and data fetching logic - Update MainView.jsx to use the hook directly instead of withView HOC - Update BugDetailsView.jsx to use the hook directly instead of withView HOC - Remove View.jsx (the old class-based HOC) - Update tests to work with the new hook-based implementation The hook uses: - useState for state management (replacing this.state) - useEffect for lifecycle (replacing componentDidMount) - useCallback for memoized functions - useRef for pending update tracking (replacing setState callbacks) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Build on top of #9124
React Router v6 Migration Summary
Overview
This PR migrates from
react-router-domv5.1.2 to v6.x and removes the deprecatedconnected-react-routerlibrary.Key Changes
Dependencies
API Changes
<Switch><Routes><Route render={() => <Comp />} /><Route element={<Comp />} /><Redirect to="/path" /><Route element={<Navigate to="/path" />} />useHistory()/history.push()useNavigate()/navigate()props.match.pathConnectedRouterBrowserRouterFiles Modified
Redux Store Changes:
ui/job-view/redux/configureStore.js- Removed router middleware and reducerRouter Updates:
ui/App.jsx- ReplacedConnectedRouter+SwitchwithBrowserRouter+Routesui/push-health/App.jsx- Updated to v6 routing patternsui/perfherder/App.jsx- Updated to v6 routing patternsui/intermittent-failures/App.jsx- Updated to v6 routing patternsNavigation Refactoring:
ui/job-view/App.jsx- ReplacedpushRoutewithuseNavigateui/job-view/headerbars/SecondaryNavBar.jsx- ReplacedpushRoutewithuseNavigateui/job-view/pushes/PushActionMenu.jsx- ReplacedpushRoutewithuseNavigateui/job-view/redux/stores/selectedJob.js- Useswindow.history.pushStatefor URL updatesui/job-view/redux/stores/pushes.js- Useswindow.history.pushStatefor URL updatesui/models/filter.js- Accepts navigate function instead of Redux pushRouteNew Utilities:
ui/helpers/router.js- Centralized navigation hooks and utilitiesWhy This Migration?
connected-react-routeris deprecated and unmaintainedTesting