Next.js Discord

Discord Forum

Parellel Routes behavior

Unanswered
Aerial yellowjacket posted this in #help-forum
Open in Discord
Aerial yellowjacketOP
parallel routes are cool but is there any way to make it so that it will match the first possible route so that it doesn't render nothing?
its better to explain it visually..
/dashboard/@stats/page.jsx,default.jsx
/dashboard/@users/page.jsx,default.jsx
/dashboard/@users/users/[id]/page.tsx
/dashboard/page.jsx,default.jsx

if I navigate to /dashboard and then to /dashboard/users/123 it will preserve the dashboard/page.tsx and dashboard/@stats/page.tsx, but if I reload that context is lost and it only renders the dashboard/@users/users/[id]/page.tsx.

Repro: https://codesandbox.io/p/devbox/tests-rpmsv9

Ideally if I navigated directly to /dashboard/users/123 it would fall back the non-matching routes to /dashboard.

3 Replies

Aerial yellowjacketOP
this is the supposed to solution:
import Page, { PageProps } from "./page";

export default async function Default(props: PageProps) {
  return <Page {...props} />;
}

So my question is, are there any caveats or things I should look out for or is this perfectly fine and intended?
Does it have to be async? What if page isn't async or is a client component?
And lastly, why not just do this by default? Seems cumbersome to do this when I think its the expected behavior.