not-found.tsx Doesn't Render with Slots (Parallel Routing)
Unanswered
Bigeye tuna posted this in #help-forum
Bigeye tunaOP
I have discovered that when you attempt parallel routing using a slot (or multiple), attempting to access a route that does not exist will no longer render the not-found.tsx file in the app directory if the user is currently in a slot route.
In the RootLayout, if you add a slot and conditionally render it (say through authentication or even a simple boolean), unless the initial ReactNode is {children}, the not-found.tsx will not load.
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
export default async function RootLayout({
children,
active
}: Readonly<{
children: React.ReactNode;
active: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{true ?
#Unknown Channel
{active}
</>
:
#Unknown Channel
{children}
</>}
</body>
</html>
);
}
In the RootLayout, if you add a slot and conditionally render it (say through authentication or even a simple boolean), unless the initial ReactNode is {children}, the not-found.tsx will not load.
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
export default async function RootLayout({
children,
active
}: Readonly<{
children: React.ReactNode;
active: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{true ?
#Unknown Channel
{active}
</>
:
#Unknown Channel
{children}
</>}
</body>
</html>
);
}
15 Replies
Antillean Palm Swift
That’s an interesting problem. Do you have default.js defined for your slot?
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#defaultjs
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#defaultjs
Bigeye tunaOP
Yes, even with a default.tsx file in the slot directory, the issue persists
Antillean Palm Swift
I am not sure what you meant by “if the user is currently in a slot route”
I am quoting the docs below
“
However, slots are not route segments and do not affect the URL structure. For example, for /@analytics/views, the URL will be /views since @analytics is a slot. Slots are combined with the regular Page component to form the final page associated with the route segment. Because of this, you cannot have separate static and dynamic slots at the same route segment level. If one slot is dynamic, all slots at that level must be dynamic.
“
I am quoting the docs below
“
However, slots are not route segments and do not affect the URL structure. For example, for /@analytics/views, the URL will be /views since @analytics is a slot. Slots are combined with the regular Page component to form the final page associated with the route segment. Because of this, you cannot have separate static and dynamic slots at the same route segment level. If one slot is dynamic, all slots at that level must be dynamic.
“
Bigeye tunaOP
Let me clarify. My intention is to redirect an authenticated user to a slot (@active). My intention is for the home page for both logged in and logged out users to be at the '/' route. So by 'in a slot route', I mean that the user is being redirected into the components for that slot
So I do not mean that the URL has changed, but the layout.tsx has redirected the user inside of the slot
Antillean Palm Swift
Ah that makes sense. Thanks for clarifying.
‘
import { checkUserRole } from '@/lib/auth'
export default function Layout({
user,
admin,
}: {
user: React.ReactNode
admin: React.ReactNode
}) {
const role = checkUserRole()
return role === 'admin' ? admin : user
}
‘
This is an example, it should render conditionally based on your criteria. I wonder what the problem is.
import { checkUserRole } from '@/lib/auth'
export default function Layout({
user,
admin,
}: {
user: React.ReactNode
admin: React.ReactNode
}) {
const role = checkUserRole()
return role === 'admin' ? admin : user
}
‘
This is an example, it should render conditionally based on your criteria. I wonder what the problem is.
Bigeye tunaOP
I'm going to create a new project and see if the issue persists
Not that I got far in my other project, but I am confused where the issue could come from
Antillean Palm Swift
Ok, do you a separate route for log in page?
Bigeye tunaOP
The log in page is the page.tsx in the app directory
Antillean Palm Swift
Okay
/ renders sign in page, on login you redirect the user to the same route / and depending on the auth status you either show @active slot or {children}
Is that correct?
Is that correct?
Bigeye tunaOP
Yes
Antillean Palm Swift
I think you are better off using a component for active instead of slots as slots are for highly dynamic content such as feed.