Next.js Discord

Discord Forum

Parallel routes are not rendering correctly when switching routes

Unanswered
Large garden bumble bee posted this in #help-forum
Open in Discord
Large garden bumble beeOP
it looks like parallel routes is actually what I want for an interface I'm making. See the attached image, every page is going to look like this, but it is going to have different navigation depending on if it's in settings or not
./src/app/
├── @navigation/
│   ├── default.tsx
│   ├── layout.tsx
│   └── page.tsx
├── settings/
│   ├── @navigation/
│   │   ├── default.tsx
│   │   └── page.tsx
│   ├── assistants/
│   ├── notifications/
│   ├── organization/
│   ├── profile/
│   │   ├── details/
│   │   ├── security/
│   │   ├── usage/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── subscriptions/
│   └── page.tsx
├── favicon.ico
├── layout.tsx
└── page.tsx

I then set up my app/layout.tsx to take that navigation parallel route
interface LayoutProps {
  readonly children: ReactNode;
  readonly navigation: ReactNode;
}

export default function RootLayout({ children, navigation }: LayoutProps) {
  return (
    <html lang="en">
      <body
        className={clsx(
          inter.className,
          "h-screen",
          "w-full",
          "bg-[#F7F7F7]",
          "flex"
        )}
      >
        <aside className="min-w-56 px-6 py-9">{navigation}</aside>
        <div className="flex-grow">{children}</div>
      </body>
    </html>
  );
}

I set up my project like this. However, when I go to /settings, I expect to see the content from /settings/@navigation/page.tsx, or at least /settings/@navigation/default.tsx
However, I don't see anything like this. Am I doing something wrong?

21 Replies

American black bear
parrallel routes are only accessible by the layout.tsx on the same level
Large garden bumble beeOP
oh yeah so I changed the routing 
app
├── @content
│   ├── assistant
│   │   └── [assistantId]
│   │       └── chat
│   │           └── [chatId]
│   └── settings
│       ├── assistants
│       │   └── [id]
│       ├── notifications
│       ├── organization
│       ├── profile
│       │   ├── @navigation
│       │   ├── details
│       │   ├── security
│       │   └── usage
│       └── subscriptions
├── @navigation
│   └── settings
└── api
    └── users
        └── [id]

It kinda works but sometimes it can't decide which navigation to use
Asian black bear
To ensure you get the best possible assistance, could you please change your thread title to be more descriptive? Specific titles attract the attention of users who can help and make it easier for others to find similar solutions in the future.
Large garden bumble beeOP
^ this is what I am seeing happen
the back just just a Link to /
American black bear
do you have under content and navigation a 
default.tsx
that returns a null?
Large garden bumble beeOP
it doesn't return null, it returns a component rn
import { NavItem, NavList } from "@/components";

export default async function Navigation() {
  return (
    <NavList>
      <NavItem href="/">Home page</NavItem>
      <NavItem href="/settings">Settings</NavItem>
    </NavList>
  );
}
that is src/app/@navigation/default.tsx
American black bear
A default.txt next to the folders when that does not work, i think it can be a bug
or grouping of routes can help i dont know.
Large garden bumble beeOP
what do you mean by that?
Large garden bumble beeOP
I'm not sure that's exactly what I want in this case, because they share a lot of the same UI elements
Large garden bumble beeOP
this would kinda be the layout of the entire app, but that part that says This could be anything, really will change basically only in /settings
American black bear
https://github.com/ppvolto/nextjs-parallel-routes/tree/main/src/app/%40navigation its a missing catch all element that is the problem
when i understant it correctly
that i forget every time then some elements only with a catch all function
Large garden bumble beeOP
oooooooooooooooooh okay that makes sense, now I get it
thanks for the effort you put in, that looked like a lot of work