Docs: The useSelectedLayoutSegment(s) in parallel routes does not match the actual running result #59968
Labels
Comments
|
Yeah, I was curious why it doesn't behave the same as the doc mentioned. It's either a bug or the doc is outdated. This is one of my code examples where I have to do weird check like |
I don't known what happend! I am new to next js and the results of running the sample program are inconsistent with the documentation, which is very confusing |
5 tasks
ztanner
added a commit
that referenced
this issue
Jan 23, 2024
fixes NEXT-2173 Fixes #59968 ### TODOs - [x] recreate [repro](https://github.com/williamli/nextjs-NEXT-2173) - [x] patch `useSelectedLayoutSegment` to support parallel routes (see "What") - [x] check `useSelectedLayoutSegments` to see if it is affected - [x] add test cases - [x] finalise PR description ### What? `useSelectedLayoutSegment` does not return the name of the active state of parallel route slots. #### Expected Behaviour According to https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments > When a user navigates to app/@auth/login (or /login in the URL bar), loginSegments will be equal to the string "login". 👉🏽 We should update the docs to explain `null` and __DEFAULT__ result as well. According to the [API reference for useSelectedLayoutSegment](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment#returns): > useSelectedLayoutSegment returns a string of the active segment or null if one doesn't exist. > For example, given the Layouts and URLs below, the returned segment would be: > <img width="881" alt="CleanShot 2024-01-20 at 14 50 52@2x" src="https://github.com/vercel/next.js/assets/179761/bfaa34c8-3139-4ec3-bd70-4346c682e36b"> #### Current Behaviour Currently a string "children" is returned for everything inside a parallel route with active state and `__DEFAULT__` is returned if there is no active state for the parallel route (since the `default.tsx` is loaded). ~`null` is returned when the `default.tsx` is not loaded (possibly caused by another bug, see test case 5).~ #### Reproduction [GitHub Repo](https://github.com/williamli/nextjs-NEXT-2173) is created based on the example provided in [Next.js docs for using `useSelectedLayoutSegment` with Parallel Routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments). #### Test Cases 1. If you visit https://next-2173.vercel.app/, you get loginSegments: __DEFAULT__ (hard navigation) or children (soft navigation after returning from a visit to /login) 2. If you soft nav to (/app/@auth/login and /app/@nav/login) https://next-2173.vercel.app/login, you get 1. loginSegment: `children` (expected value should be `login`) 2. navSegment: `children` (expected value should be `login`) 3. If you soft nav to (/app/@auth/reset) https://next-2173.vercel.app/reset, you get 1. loginSegments: `children` (expected value should be `reset`) 2. navSegment: `children` (expected value should be `login`) 4. If you soft nav to (/app/@auth/reset/withEmail) https://next-2173.vercel.app/reset/withEmail, you get 1. loginSegments: `children` (expected value should be `withEmail`) 2. navSegment: `children` (expected value should be `login`) 5. ~If you hard nav to (/app/@auth/reset/withEmail) https://next-2173.vercel.app/reset/withEmail, you get an unexpected result due to possibly another bug:~ * ~navSegment is `null` on the deployed (Vercel) version, the navSlot is *not* loaded~ * ~navSegment is `__DEFAULT__` on local dev, the navSlot loads `/app/@nav/default.tsx`.~ ### Why? In `packages/next/src/client/components/navigation.ts`, `getSelectedLayoutSegmentPath` is called and returns the correct segmentPath for parallel routes (even though there is a TODO comment indicating this function needs to be updated to handle parallel routes) but `useSelectedLayoutSegment` failed to return the correct segment when a parallelRouteKey is provided. ### How? `useSelectedLayoutSegment` is updated to return selectedLayoutSegments[0] for non parallel routes (original logic), but it will return the last segments for parallel routes (or null if nothing is active). ``` return parallelRouteKey === 'children' ? selectedLayoutSegments[0] : selectedLayoutSegments[selectedLayoutSegments.length-1] ?? null ``` --------- Co-authored-by: Zack Tanner <zacktanner@gmail.com>
|
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
What is the improvement or update you wish to see?
update useSelectedLayoutSegment(s) in parallel routes to correct actual running results
Is there any context that might help us understand?
this is my directory structure
this is my code in example5/layout.js
this is the result of my program running
if follow the documentation step, the result that navigate to @header/bar should be bar, but the actual result is children
so, what's the problem?
Does the docs page already exist? Please link to it.
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#useselectedlayoutsegments
The text was updated successfully, but these errors were encountered: