Repository navigation
feat(routes): report the matched route pattern across nested routers - #1258
Open
damiengillesscality wants to merge 8 commits into
Open
damiengillesscality wants to merge 8 commits into
damiengillesscality wants to merge 8 commits into
Conversation
Add a drop-in Routes wrapper that renders a reporter beside every route element. Each reporter registers the full pattern of its match chain in a store shared through globalThis, and useCurrentRoutePattern returns the deepest one, so a host app can tell which page is shown (e.g. /platform/nodes/:name/overview) across its own router, federated micro-apps and Tabs, without listing the patterns anywhere. Tabs now uses the wrapper so tab routes are part of the pattern.
Contributor
Hello damiengillesscality,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
… key
Render Component before element and an Outlet when element is falsy, so
layout routes with element={null} keep rendering their children. Version
the globalThis key, since core-ui copies of different versions share it.
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
Contributor
🔴 Request changesFindings
This review is advisory and does not block the merge. Full reviewFindings
|
Its argument type comes from react-router's UNSAFE_RouteContext, so exporting it would tie the stable surface to a react-router internal.
Replace the globalThis store with a RoutePatternProvider the host renders around its routes. Reporters register with the closest provider and useCurrentRoutePattern reads it from context, so routes rendered without a provider, such as a micro-app running standalone, report nothing. Only the context object stays on globalThis, since micro-apps may bundle a different core-ui version than the host.
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
…eContext Each route rendered by core-ui Routes passes its pattern down through a shared scope context, and its reporter registers that pattern, so the pattern no longer depends on react-router's UNSAFE_RouteContext. The trade-off: every router between the host and the page must use core-ui Routes, since a level rendered by react-router's Routes is now missing from the pattern. Absolute paths resolve against the enclosing Routes, as react-router does, which keeps Tabs' paths right.
Each route re-provides the same context with its own depth and prefix, keeping the provider's register and current pattern, so a second context is not needed.
Cover when to use core-ui Routes instead of react-router's, and show that routes rendered by react-router's Routes are missing from the pattern.
Contributor
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
Prettier reflows a template literal inside an MDX Source block and broke the sample's indentation.
damiengillesscality
marked this pull request as ready for review
October 15, 2026 14:01
This branch has not been deployed
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
3 participants
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.
TL;DR — Adds a drop-in
Routeswrapper, aRoutePatternProviderand auseCurrentRoutePattern()hook so a host app can tell which page pattern is shown (e.g./platform/nodes/:name/overview) even though the page is assembled from several nested routers: the shell's, each federated micro-app's, andTabs. No page needs new code and no list of patterns is kept anywhere — each matched route reports its full match chain to the closest provider and the deepest one wins.flowchart TD subgraph Shell["Host app (e.g. shell-ui)"] BR[BrowserRouter] --> P["RoutePatternProvider"]:::new P --> SR["Routes /platform/*"] Hook["useCurrentRoutePattern()"]:::new end subgraph Remote["Federated micro-app (maybe another core-ui version)"] AR["Routes nodes/*"] --> NR["Routes :name/*"] end subgraph CoreUI["core-ui"] Tabs["Tabs → Routes overview"]:::changed Wrap["Routes wrapper: RoutePatternReporter beside every route element"]:::new end SR --> AR NR --> Tabs SR -. register .-> P AR -. register .-> P NR -. register .-> P Tabs -. register .-> P P -- "deepest match chain" --> Hook classDef new fill:#d4f7d4,stroke:#2b8a3e; classDef changed fill:#fff3bf,stroke:#e67700;/platform/*+nodes/*+:name/*+overviewgives/platform/nodes/:name/overview. Absolute paths resolve against the enclosing<Routes>, as react-router does (Tabs relies on it).globalThis(Symbol.for('@scality/core-ui/route-pattern-context/v1')), because a micro-app may bundle a different core-ui version than the host, and the host's provider and routes must reach its routes.<Routes>matches nothing, the parent's pattern is reported (e.g./platform/nodes/*).Routesfrom@scality/core-uiinstead ofreact-router. Every router between the host and the page must use it: a level rendered by react-router'sRoutesis missing from the pattern (e.g./aboutinstead of/platform/about).