Pass components rendered by parallel routes to a React context

[dchubarov]

Link to the code that reproduces this issue

https://github.com/dchubarov/nextjs-blog-tutorial/blob/bug/pass-breadcrumbs-to-context/src/app/layout.tsx

To Reproduce

1. checkout branch bug/pass-breadcrumbs-to-context
2. run pnpm install
3. run prisma migrate dev --name=init to intialize Sqlite db
4. run pnpm run dev
5. 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]
      |                                   ^

[DiegoDev2]

Render the slot directly in the layout and pass it as a prop to where you need it.

<PageLayout breadcrumbs={<Slot name="breadcrumbs" />} />

or wait for a future version of Next.js that may improve parallel path interoperability with context/client components.

[dchubarov]

Thanks for your answer @DiegoDev2. Indeed, in this intentionally simplified use case the workaround can easily be found, or even not required at all. However, I still think conceptually it should not be forbidden to propagate components via React context.