Parallel routing is great --- it allows you to render a slot based on certain conditions conditionally, either auth or data fetching status.
If you haven't heard of or used parallel routing before, please check this
But it can go wrong very quick, luckily fixes are quick too!
In a scenario you have a blank page comes with a layout, and you are trying to hydrate the page with three parallel route: overview
, projects
, and dashboard
to show different things to your users. But it can break when you have a file structure like
|-[workspaceId]
|--create-project
|--settings
|--@overview
|--@projects
|--@dashboard
|--layout.tsx
Problem 1: it shows you a blank page
What you can do?
In your layout.tsx
file, you have already specified
export default function WorkspaceLayout(props: {
create: React.ReactNode;
projects: React.ReactNode;
overview: React.ReactNode;
}) {
return (
<>
<SomeLayout>
{props.projects}
{props.create}
{props.overview}
</SomeLayout>
</>
);
}
Solution 1: In this case, You will need an empty page.tsx
like:
export default function DashboardPage(props: {
params: { workspaceId: string };
}) {
return <></>;
}
with an empty fragment and add the implicit children your layout.tsx
like so:
export default function WorkspaceLayout(props: {
children: React.ReactNode;
create: React.ReactNode;
projects: React.ReactNode;
overview: React.ReactNode;
}) {
return (
<>
{props.children} // it really doesn't matter where this is placed because it's nothing in there,
<SomeLayout>
{props.projects}
{props.create}
{props.overview}
</SomeLayout>
</>
);
}
If the page.tsx
, or children
prop doesn't exist, nextjs can't initialise this segment.
At this point your files will look like
|-[workspaceId]
|--create-project
|--settings
|--@overview
|--@projects
|--@dashboard
|--layout.tsx
|--page.tx
Problem 2: when you navigate to /[someworkspaceId]/create-project, it shows you a 404 error, tell you page not found or internal server error.
What the heck happened? I have a route there!
Solution 2: Create a separate layout group
Instead of having a file structure like above, you could have one like this:
|-[workspaceId]
|--create-project
|--settings
|--page.tsx
|--layout.tsx
|--(dashboard)
|---@overview
|---@projects
|---@dashboard
|---layout.tsx
|---page.tx
Move the old layout.tsx
into (dashboard)
folder but keep the <SomeLayout/>
component in [workspaceId]
folder, and there you have layouts inherited from a level above, and routes like /[workspaceId]/create-project
will work again!
Do you have problems with parallel routing and intercepting routes? Found a solution or not?
Would love to hear from comment section 👇🏻
Top comments (1)
Thanks