Pass components rendered by parallel routes to a React context
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
To Reproduce
- checkout branch bug/pass-breadcrumbs-to-context
- run
pnpm install - run
prisma migrate dev --name=initto intialize Sqlite db - run
pnpm run dev - navigate to
http://localhost:3000/blog
Current vs. Expected behavior
Use case
I'm implementing a site-wide breadcrumbs component using parallel routes approach. It works just fine, but I don't want to render the breadcrumbs component returned from parallel route in the main layout. Rather, I'd prefer to pass it down the tree, and render it elsewhere (say, in src/components/page-layout.tsx:Content.
To do this, I implemented a custom context provider, which is a client component of course, and I pass breadcrumbs to that provider. In a child page layout component I'm trying to get breadcrumbs with React's use, and render it. (use actually returns a <Lazy/>).
More broadly, can the components rendered in parallel routes be passed to client components? My feeling is that it should work.
Current behavior
I get a runtime error "Error: Cannot read properties of undefined (reading '0')"
TypeError: Cannot read properties of undefined (reading '0')
at OuterLayoutRouter (../../../src/client/components/layout-router.tsx:534:27)
532 | const parentTreeSegment = parentTree[0]
533 | const tree = parentTree[1][parallelRouterKey]
> 534 | const treeSegment = tree[0]
| ^
Expected behavior
Breadcrumbs component is rendered.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 8
Binaries:
Node: 20.18.2
npm: 10.8.2
Yarn: 1.22.22
pnpm: 10.11.0
Relevant Packages:
next: 15.3.2 // Latest available version is detected (15.3.2).
eslint-config-next: 15.3.2
react: 19.1.0
react-dom: 19.1.0
typescript: 5.8.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Parallel & Intercepting Routes
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
I also tested in 15.4.0-canary.47, I get a similar error:
TypeError: Cannot read properties of undefined (reading '0')
at OuterLayoutRouter (../../../src/client/components/layout-router.tsx:560:35)
558 | // params on the server.)
559 | const activeTree = parentTree[1][parallelRouterKey]
> 560 | const activeSegment = activeTree[0]
| ^
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the failure from the linked branch using the commands and navigation steps in the issue. Inspect src/app/layout.tsx, src/components/page-layout.tsx:Content, and the reported OuterLayoutRouter locations in layout-router.tsx to understand how the parallel route is passed through the context. Done means the breadcrumbs component renders at the requested location without the runtime error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100