#not-found.tsx Doesn't Render with Slots (Parallel Routing)

16 messages · Page 1 of 1 (latest)

sturdy ember
#

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 ?
<>
{active}
</>
:
<>
{children}
</>}
</body>
</html>
);
}

weak martenBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

long wedge
sturdy ember
#

Yes, even with a default.tsx file in the slot directory, the issue persists

long wedge
#

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.
“

sturdy ember
#

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

long wedge
#

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.

sturdy ember
#

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

long wedge
#

Ok, do you a separate route for log in page?

sturdy ember
#

The log in page is the page.tsx in the app directory

long wedge
#

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?

sturdy ember
#

Yes