Skip to content

react-router v6 flip (3/3): repoint routerCompat at v6, remove the compat shim - #496

Merged
cigamit merged 5 commits into
ctrliq:mainfrom
blaipr:feature/router-compat-3
Jun 22, 2026
Merged

react-router v6 flip (3/3): repoint routerCompat at v6, remove the compat shim#496
cigamit merged 5 commits into
ctrliq:mainfrom
blaipr:feature/router-compat-3

Conversation

@blaipr

@blaipr blaipr commented Jun 19, 2026

Copy link
Copy Markdown
Contributor
SUMMARY

Part 3 of 3 of the react-router v5-compatv6 flip (final step; builds on #494 and #495).

Parts 1–2 routed every consumer through src/routerCompat. This repoints routerCompat at react-router-dom and bumps the package to v6, flipping the whole app from one place, then converts the few remaining v5-only APIs.

  • routerCompat.js now re-exports from react-router-dom instead of react-router-dom-v5-compat.
  • package.json: react-router-dom ^5.3.3^6.30.4; remove react-router-dom-v5-compat; history 4.10.1^5.3.0 (devDependency — v6's <Router> needs the v5 listen signature and no longer bundles history). Drops the orphaned react-router-dom-v5-compat license.
  • App.js: drop <CompatRouter>; the v6 <HashRouter> wraps <App> directly.
  • Convert the v5-only APIs v6 removes: useRouteMatchuseMatch / location.pathname; <Redirect><Navigate>; matchPath → v6 signature; <Link innerRef>ref (v6 Link is forwardRef); ScreenHeader breadcrumbs rewritten from the recursive v5 <Route>/useRouteMatch walk to a plain useLocation() + cumulative-path lookup.
  • testUtils/rtlContexts.js: replace the v5-Router + nested-v6 compat layer with a single v6 history-driven <Router>; convert the affected router test suites to v6 (standalone <Route><Routes>+element, manual <Router history>renderWithContexts, useHistoryuseNavigate, useMatch/useParams mounted at concrete v6 URLs — no weakened assertions, no new skips). App.test.js silences the benign v6 future-flag warnings.

After this PR the compat bridge is gone and the app is on react-router v6 proper.

Depends on #494 and #495 (parts 1–2). Merge those first.

ISSUE TYPE
  • New or Enhanced Feature
COMPONENT NAME
  • UI
ASCENDER VERSION
awx: 25.4.1.dev114+g<part3>
ADDITIONAL INFORMATION
  • npm --prefix awx/ui run lint clean; npm --prefix awx/ui run test552 suites / 2908 tests green (3 documented skips); npm --prefix awx/ui run build (production) clean; test_licenses.py green (removed the orphaned react-router-dom-v5-compat license).
  • Note: v6 emits benign v7_startTransition / v7_relativeSplatPath future-flag console warnings — opting into them belongs with the later react-router 7 step.

blaipr added 3 commits June 19, 2026 08:36
First step of splitting the react-router v5-compat -> v6 flip into reviewable
pieces. Because react-router-dom-v5-compat peer-requires react-router-dom v4/5,
the package bump and every import retarget are otherwise one atomic 370-file
change that exceeds tooling review limits.

Introduce `src/routerCompat.js`, a single re-export point for the react-router
API the app uses, and retarget the first ~half of the v5-compat importers
(components, contexts, hooks, and the first block of screens) to import from it.

`routerCompat` currently re-exports from react-router-dom-v5-compat, so this is
a behaviour-preserving indirection: no API or routing change, the app still runs
on react-router-dom v5 + the compat bridge. The final part of the split repoints
`routerCompat` at react-router-dom once the package is on v6, flipping every
consumer at once. App.js keeps importing CompatRouter directly (no v6 equivalent)
until that final step.
Retarget the remaining react-router-dom-v5-compat importers (the second half
of the screens) to import from `src/routerCompat` instead, continuing part 1.

Still behaviour-preserving: `routerCompat` re-exports the same v6 API from
react-router-dom-v5-compat, so the app remains on react-router-dom v5 + the
compat bridge with no API or routing change. After this PR the only direct
react-router-dom-v5-compat importers left are `routerCompat` itself, `App.js`
(CompatRouter, no v6 equivalent), and the two TopologyView RTL test harnesses
that wrap with <CompatRouter> -- all handled in the final part.
Final step of the v5-compat -> v6 migration. Parts 1-2 routed every consumer
through src/routerCompat; this repoints routerCompat at react-router-dom and
bumps the package to v6, flipping the whole app at once.

- routerCompat.js now re-exports from `react-router-dom` instead of
  react-router-dom-v5-compat.
- package.json: react-router-dom ^5.3.3 -> ^6.30.4; remove
  react-router-dom-v5-compat; history 4.10.1 -> ^5.3.0 (devDependency -- v6's
  <Router> needs the v5 listen signature and no longer bundles history). Drop
  the orphaned react-router-dom-v5-compat license.
- App.js: drop <CompatRouter>; the v6 <HashRouter> wraps <App> directly.
- Convert the remaining v5-only APIs v6 removed: useRouteMatch -> useMatch or
  location.pathname; <Redirect> -> <Navigate>; matchPath -> v6 signature;
  <Link innerRef> -> ref (v6 Link is forwardRef); ScreenHeader breadcrumbs
  rewritten from the recursive v5 <Route>/useRouteMatch walk to a plain
  useLocation() + cumulative-path lookup.
- testUtils/rtlContexts.js: replace the v5-Router + nested-v6 compat layer with
  a single v6 history-driven <Router>; convert the affected router test suites
  to v6 (standalone <Route> -> <Routes>+element, manual <Router history> ->
  renderWithContexts, useHistory -> useNavigate, useMatch/useParams mounted at
  concrete v6 URLs). App.test.js silences the benign v6 future-flag warnings.

Verified: lint clean, full Jest 552 suites/2908 tests green, production build
clean, test_licenses.py green.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review this pull request because it exceeds the maximum number of files (300). Try reducing the number of changed files and requesting a review from Copilot again.

# Conflicts:
#	awx/ui/package-lock.json
#	awx/ui/package.json
#	awx/ui/src/components/AddRole/AddResourceRole.js
#	awx/ui/src/components/AppContainer/NavExpandableGroup.js
#	awx/ui/src/components/ContentError/ContentError.js
#	awx/ui/src/components/LaunchButton/LaunchButton.js
#	awx/ui/src/components/Lookup/CredentialLookup.js
#	awx/ui/src/components/Lookup/HostFilterLookup.js
#	awx/ui/src/components/Lookup/InstanceGroupsLookup.js
#	awx/ui/src/components/Lookup/InventoryLookup.js
#	awx/ui/src/components/Lookup/Lookup.js
#	awx/ui/src/components/Lookup/MultiCredentialsLookup.js
#	awx/ui/src/components/Lookup/OrganizationLookup.js
#	awx/ui/src/components/Lookup/PeersLookup.js
#	awx/ui/src/components/Lookup/ProjectLookup.js
#	awx/ui/src/components/Schedule/ScheduleEdit/ScheduleEdit.js
#	awx/ui/src/components/ScreenHeader/ScreenHeader.js
#	awx/ui/src/screens/Host/HostEdit/HostEdit.js
#	awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js
#	awx/ui/src/screens/Inventory/AdvancedInventoryHosts/AdvancedInventoryHosts.js
#	awx/ui/src/screens/Inventory/InventoryEdit/InventoryEdit.js
#	awx/ui/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostListItem.js
#	awx/ui/src/screens/Inventory/InventoryHostEdit/InventoryHostEdit.js
#	awx/ui/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.js
#	awx/ui/src/screens/Inventory/SmartInventoryEdit/SmartInventoryEdit.js
#	awx/ui/src/screens/Inventory/shared/InventoryGroupsDeleteModal.js
#	awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js
#	awx/ui/src/screens/NotificationTemplate/NotificationTemplateEdit/NotificationTemplateEdit.js
#	awx/ui/src/screens/Organization/OrganizationEdit/OrganizationEdit.js
#	awx/ui/src/screens/Team/TeamEdit/TeamEdit.js
@blaipr

blaipr commented Jun 22, 2026

Copy link
Copy Markdown
Contributor Author

Merge conflicts with main have been resolved.

@cigamit

cigamit commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

Looks like more conflicts now that #295 has been merged

# Conflicts:
#	awx/ui/src/components/AppContainer/NavExpandableGroup.js
#	awx/ui/src/components/Lookup/CredentialLookup.js
#	awx/ui/src/components/Lookup/Lookup.js
#	awx/ui/src/components/Schedule/Schedule.js
#	awx/ui/src/routerCompat.js
#	awx/ui/src/screens/Application/Application/Application.js
#	awx/ui/src/screens/Credential/Credential.js
#	awx/ui/src/screens/Credential/CredentialAdd/CredentialAdd.js
#	awx/ui/src/screens/Credential/CredentialEdit/CredentialEdit.js
#	awx/ui/src/screens/ExecutionEnvironment/ExecutionEnvironment.js
#	awx/ui/src/screens/Host/Host.js
#	awx/ui/src/screens/InstanceGroup/ContainerGroup.js
#	awx/ui/src/screens/InstanceGroup/InstanceGroup.js
#	awx/ui/src/screens/Instances/Instance.js
#	awx/ui/src/screens/Instances/InstanceList/InstanceList.test.js
#	awx/ui/src/screens/Inventory/AdvancedInventoryHost/AdvancedInventoryHost.js
#	awx/ui/src/screens/Inventory/ConstructedInventory.js
#	awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.js
#	awx/ui/src/screens/Inventory/ConstructedInventoryDetail/ConstructedInventoryDetail.test.js
#	awx/ui/src/screens/Inventory/FederatedInventory.js
#	awx/ui/src/screens/Inventory/FederatedInventoryDetail/FederatedInventoryDetail.js
#	awx/ui/src/screens/Inventory/Inventory.js
#	awx/ui/src/screens/Inventory/InventoryGroup/InventoryGroup.js
#	awx/ui/src/screens/Inventory/InventoryHost/InventoryHost.js
#	awx/ui/src/screens/Inventory/InventorySource/InventorySource.js
#	awx/ui/src/screens/Inventory/InventorySourceAdd/InventorySourceAdd.js
#	awx/ui/src/screens/Inventory/InventorySourceEdit/InventorySourceEdit.js
#	awx/ui/src/screens/Inventory/SmartInventory.js
#	awx/ui/src/screens/Inventory/SmartInventoryAdd/SmartInventoryAdd.js
#	awx/ui/src/screens/Inventory/SmartInventoryEdit/SmartInventoryEdit.js
#	awx/ui/src/screens/Job/Job.js
#	awx/ui/src/screens/ManagementJob/ManagementJob.js
#	awx/ui/src/screens/NotificationTemplate/NotificationTemplate.js
#	awx/ui/src/screens/Organization/Organization.js
#	awx/ui/src/screens/Project/Project.js
#	awx/ui/src/screens/Setting/AzureAD/AzureAD.js
#	awx/ui/src/screens/Setting/GitHub/GitHub.js
#	awx/ui/src/screens/Setting/LDAP/LDAP.js
#	awx/ui/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.js
#	awx/ui/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionEdit.js
#	awx/ui/src/screens/Team/Team.js
#	awx/ui/src/screens/User/User.js
#	awx/ui/src/screens/User/UserToken/UserToken.js
#	awx/ui/src/screens/WorkflowApproval/WorkflowApproval.js
@blaipr

blaipr commented Jun 22, 2026

Copy link
Copy Markdown
Contributor Author

Ready to merge.

@cigamit
cigamit merged commit d5540fd into ctrliq:main Jun 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants