Trying to get really simple parallel route use case for heroes to work

Question

I have an app with the following structure:

app
- foo
  - [bar]
    - (company)
      - @hero
        - one
          page.tsx (prints "i'm one)
        default.tsx (prints "i'm default")
        page.tsx (prints "i'm page")
      - one
        page.tsx
      - two
        page.tsx
      error.tsx
      layout.tsx
      loading.tsx
      page.tsx

I've read the docs for parallel routes several times, and trawled for examples, but cannot get it to work how I'm expecting. Have I mis-understood how parallel routes and slots are supposed to work?

layout.tsx looks like this

return (
    <>
      {hero}
      <CompanyNavbar tidm={params.tidm}/>
      {children}
    </>
  );

Really straightforward use case - for each page that uses this layout, I want to specify a different hero image, as well as the content that renders for the page in {children}

No matter what combination I try, I can only ever get the contents of @hero/default.tsx to render

Garafian Shepherd · Answer

So bizarrely enough, after poking the directory structures with a stick, trying many permutations until something happened, I actually ended back on precisely the above structure and it now works ...no idea if it was a laggy .next (which I did clear at one point) or some other thing I missed, but this now does work as expected.

Trying to get really simple parallel route use case for heroes to work

1 Reply