[PR #341] [MERGED] fix: rewrite useSelectedLayoutSegment(s) to use context-based child segments #491

New issue

Closed

opened 2026-05-06 13:08:22 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:08:22 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/341
Author: @NathanDrake2406
Created: 3/8/2026
Status: ✅ Merged
Merged: 3/8/2026
Merged by: @james-elicx

Base: main ← Head: fix/use-selected-layout-segment

📝 Commits (1)

ca0ec6a fix: rewrite useSelectedLayoutSegment(s) to use context-based child segments

📊 Changes

13 files changed (+383 additions, -137 deletions)

View changed files

📝 packages/vinext/src/routing/app-router.ts (+28 -49)
📝 packages/vinext/src/server/app-dev-server.ts (+65 -21)
📝 packages/vinext/src/shims/layout-segment-context.tsx (+7 -6)
📝 packages/vinext/src/shims/navigation.ts (+29 -29)
📝 packages/vinext/src/shims/next-shims.d.ts (+1 -1)
📝 tests/app-router.test.ts (+10 -5)
➕ tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/[dynamic]/(group)/second/[...catchall]/page.tsx (+18 -0)
➕ tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/[dynamic]/page.tsx (+18 -0)
➕ tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/layout.tsx (+23 -0)
➕ tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/page.tsx (+3 -0)
➕ tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/layout.tsx (+19 -0)
➕ tests/nextjs-compat/layout-segments.test.ts (+149 -0)
📝 tests/shims.test.ts (+13 -26)

📄 Description

Summary

Replaces depth-based pathname slicing with context-based child segments for useSelectedLayoutSegment(s), fixing incorrect behavior when route groups are present in the App Router tree
Each layout now receives pre-computed child segments through React context, including route groups (which don't appear in URLs but Next.js includes in the segments array) and resolved dynamic param values
Passes matched params through to error/fallback rendering paths so LayoutSegmentProvider values stay consistent with buildPageElement() during error page rendering
Handles optional catch-all edge cases (empty array / undefined params) and extends routeSegments for parallel slot sub-routes

Test plan

Existing unit tests updated and passing (tests/shims.test.ts, tests/app-router.test.ts)
New integration test added (tests/nextjs-compat/layout-segments.test.ts) with fixture pages covering:
- Simple paths with outer/inner layout segments
- Route groups appearing in segments array
- Dynamic param resolution in segments
- Catch-all segments joined with "/"
- Leaf page returning empty segments / null
Typecheck passes
CI (Lint, Typecheck, Vitest, Playwright E2E)

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/341 **Author:** [@NathanDrake2406](https://github.com/NathanDrake2406) **Created:** 3/8/2026 **Status:** ✅ Merged **Merged:** 3/8/2026 **Merged by:** [@james-elicx](https://github.com/james-elicx) **Base:** `main` ← **Head:** `fix/use-selected-layout-segment` --- ### 📝 Commits (1) - [`ca0ec6a`](https://github.com/cloudflare/vinext/commit/ca0ec6a011bd77e890c285439d8961cb293c7867) fix: rewrite useSelectedLayoutSegment(s) to use context-based child segments ### 📊 Changes **13 files changed** (+383 additions, -137 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/routing/app-router.ts` (+28 -49) 📝 `packages/vinext/src/server/app-dev-server.ts` (+65 -21) 📝 `packages/vinext/src/shims/layout-segment-context.tsx` (+7 -6) 📝 `packages/vinext/src/shims/navigation.ts` (+29 -29) 📝 `packages/vinext/src/shims/next-shims.d.ts` (+1 -1) 📝 `tests/app-router.test.ts` (+10 -5) ➕ `tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/[dynamic]/(group)/second/[...catchall]/page.tsx` (+18 -0) ➕ `tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/[dynamic]/page.tsx` (+18 -0) ➕ `tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/layout.tsx` (+23 -0) ➕ `tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/first/page.tsx` (+3 -0) ➕ `tests/fixtures/app-basic/app/nextjs-compat/hooks-segments/layout.tsx` (+19 -0) ➕ `tests/nextjs-compat/layout-segments.test.ts` (+149 -0) 📝 `tests/shims.test.ts` (+13 -26) </details> ### 📄 Description ## Summary - Replaces depth-based pathname slicing with context-based child segments for `useSelectedLayoutSegment(s)`, fixing incorrect behavior when route groups are present in the App Router tree - Each layout now receives pre-computed child segments through React context, including route groups (which don't appear in URLs but Next.js includes in the segments array) and resolved dynamic param values - Passes matched params through to error/fallback rendering paths so `LayoutSegmentProvider` values stay consistent with `buildPageElement()` during error page rendering - Handles optional catch-all edge cases (empty array / undefined params) and extends `routeSegments` for parallel slot sub-routes ## Test plan - [x] Existing unit tests updated and passing (`tests/shims.test.ts`, `tests/app-router.test.ts`) - [x] New integration test added (`tests/nextjs-compat/layout-segments.test.ts`) with fixture pages covering: - Simple paths with outer/inner layout segments - Route groups appearing in segments array - Dynamic param resolution in segments - Catch-all segments joined with "/" - Leaf page returning empty segments / null - [x] Typecheck passes - [x] CI (Lint, Typecheck, Vitest, Playwright E2E) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>