Custom 404 page with multiple layouts
Hi all!, i'm just trying to create a custom 404.tsx in pages router with custom layouts, one with SiteLayout and another with DashboardLayout, but i'm getting an error in the server having different render from client when i use asPath from useRouter to check if i'm in the dashboard. any help ??
21 Replies
What does your folder structure look like?
And you want to have different error pages, depending if you are on /dashboard or on the main route?
different layout
its that bad ?
No, it isn't bad xD
Instead of doing how you did, did you think about doing something among the lines of:
P.S. There's nothing more annoying than a react hydration error, I absolutely hate those
same error :S
are u using the app router?
if u are, try importing from next/navigation instead of next/router
ur error is caused because ur client realizes dashboard is included in ur url (hence the if condition returns true) but ur server decides its false fsr..
Which leads me to believe it has something to do with the router
Looking at the nextjs docs and comparing I noticed the import statement.. so it COULD be the solution?
no no i'm using pages
can u try console logging asPath before the if statement?
is not making any difference if it comes from navigation or router :S
yes i logging in backend /404 and in browser /dasgdsfsda
ye nah.. navigation is an app router thing..
wait what
the thing is 404 works different that normal pages so it first render in backend
ye thats cuz its a server component
hold up.. so its logging 404 in the server and dashboard in the browser?
also it can't have getstaticprops or getserversideprops
yes
k so thats the problem.. lemme see how we can fix that
wait can u explain WHY it does that?
do u know why..?
y does the server think the user is on 404
while the client thinks its on dashboard?
also theres a decent chance a "use client" at the top MAY fix ur issue.. but not sure tho
i think as it renders the 404.tsx he knows that is redireccting to it but when it renders he also thinks that is the other url
not working "use client" in this case for pages router
good god
lemme see if I can figure smth out..
k so apparently whats happening is
U make a req for dashboard/blah, the server takes it, realizes the url doesnt exist, redirects u to /404 and then returns the html for 404 to the client
But the client RECEIVING the html for that 404 page is still on dashboard/blah hence both of them have a different asPath, and hence the html returned by the server doesnt match the one being rendered on the client..
it can have getStaticProps btw
a VERY messy solution for this could be making dashboard a dynamic route.. so that it ACCEPTS any child routes.. but regardless of the child route u can return a Dashboard 404
thats the only solution I can think of tbh
i will try to find a solution but is not working meanwhile i think i will be a generir 404 for all types of pages
just find the only solutions is stop using 404.tsx and use _error.tsx