Flip react-router-dom-v5-compat to v6 - #490
Closed
blaipr wants to merge 1 commit into
Closed
Conversation
All screen <Switch> route trees are v6 and every test suite is RTL, so the
v5-compat bridge is no longer needed. Move react-router-dom from 5.3.3 + the
react-router-dom-v5-compat shim to v6.30.4 proper, and drop the bridge.
Production changes:
- App.js: remove <CompatRouter>; the v6 <HashRouter> now wraps <App> directly.
- Retarget all ~340 'react-router-dom-v5-compat' imports to 'react-router-dom'.
- Replace v5-only APIs that v6 drops (the compat layer had been shimming them):
- ScreenHeader breadcrumbs: rewrite the recursive v5 <Route>/useRouteMatch
walk as a plain useLocation() + cumulative-path lookup (breadcrumbConfig is
keyed by resolved paths, so no route matching is needed).
- useRouteMatch -> useMatch (Setting AzureAD/LDAP/GitHub detail+edit,
Subscription, Config, UserAndTeamAccessAdd) or location.pathname (Project /
WorkflowApproval lists); Redirect -> Navigate; matchPath -> v6 signature.
- Link innerRef -> ref (v6 Link is forwardRef).
- history 4.10.1 -> 5.3.0 (devDependency; react-router v6 needs the v5 history
listen signature for the test harness, and v6 no longer pulls history itself).
Test harness:
- rtlContexts.js: replace the v5-Router + nested-v6 CompatV6Layer with a single
v6 history-driven <Router> (inlined HistoryRouter).
- Convert router-using tests to v6: standalone <Route>/<Switch> -> <Routes>
+ element, manual <Router history> -> renderWithContexts, useHistory ->
useNavigate, and mount useMatch/useParams components at concrete v6 URLs.
Verified: full Jest suite green (552 suites / 2910 tests), lint clean,
test_licenses.py green. Browser-verified on a dev instance: 19 routes render,
breadcrumbs, tab + nested sub-tab navigation, Add-button links, useMatch detail
pages (GitHub/Azure/LDAP), and browser back/forward all work with no
/undefined/ API calls.
blaipr
force-pushed
the
feature/react-router-v6-proper
branch
from
June 19, 2026 00:43
8e7ecff to
80edab9
Compare
Contributor
Author
|
Superseding this in favor of a 3-part split so the changes are reviewable in pieces (this single PR was 373 files, over Copilot's 300-file review limit, so it never got an automated review). The v6 flip is inherently atomic because react-router-dom-v5-compat peer-requires react-router-dom v4/5 and cannot coexist with v6. To split it anyway, the new series introduces a one-line src/routerCompat re-export module, routes every consumer through it in two mechanical passes, then flips that single module to v6 last:
Each part is under 300 files, individually Copilot-reviewable, and leaves the app working and the suite green. Same end state as this PR (lint clean, 552 suites green, production build clean, test_licenses green). Closing this one. |
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
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.
SUMMARY
Flip
react-router-domfrom v5 + thereact-router-dom-v5-compatbridge to react-router v6 proper, completing Step 2 of the React modernization. Every screen<Switch>route tree is already v6 and the whole test suite is RTL, so the compat bridge is no longer needed.Production changes
App.js: remove<CompatRouter>— the v6<HashRouter>wraps<App>directly.react-router-dom-v5-compatimports →react-router-dom.<Route>/useRouteMatchwalk as a plainuseLocation()+ cumulative-path lookup (breadcrumbConfigis keyed by resolved paths, so no route matching is needed).useRouteMatch→useMatch(Setting AzureAD/LDAP/GitHub detail+edit, Subscription, Config, UserAndTeamAccessAdd) orlocation.pathname(Project/WorkflowApproval lists);<Redirect>→<Navigate>;matchPath→ v6 signature.<Link innerRef>→ref(v6LinkisforwardRef).react-router-dom^5.3.3→^6.30.4; removereact-router-dom-v5-compat.history4.10.1→^5.3.0(devDependency — v6's<Router>needs the v5listensignature, and v6 no longer pullshistoryitself; only the test harness uses it directly).Test harness
testUtils/rtlContexts.js: replace the v5-Router+ nested-v6CompatV6Layerwith a single v6 history-driven<Router>(an inlinedHistoryRouter).<Switch>/standalone<Route>→<Routes>+element, manual<Router history>→renderWithContexts,useHistory→useNavigate, mountuseMatch/useParamscomponents at concrete v6 URLs). No production assertions weakened; no new skips.ISSUE TYPE
COMPONENT NAME
ASCENDER VERSION
ADDITIONAL INFORMATION
Stacked on #489 (the JobOutput
@tanstack/react-virtualswap) to avoid apackage.json/JobOutput.jsconflict; once #489 merges this rebases cleanly to drop that commit.Verification
npm --prefix awx/ui run test: 552 suites / 2910 tests green (3 pre-existing documented skips);npm --prefix awx/ui run lintclean;npm --prefix awx/ui run build(production) compiles clean;test_licenses.pygreen (removed the orphanedreact-router-dom-v5-compatlicense)./api/v2/.../undefined/...calls:useMatchdetail pages (GitHub/Azure/LDAP detail + edit) render without redirect loops.Note: v6 emits benign
v7_startTransition/v7_relativeSplatPathfuture-flag console warnings — harmless; opting into them belongs with the react-router 7 step.