Custom 404 does not appear in my main-layout
I am quite a bit confused on how to get a custom 404 page to display the header and footer that are in my main-layout.tsx. I am able to get a custom 404 to work by adding a notFoundComponent to the __root OR to the router const in main.tsx. However, those do not have my main-layout. Any ideas?
5 Replies
relaxed-coral•15mo ago
I use a RootDocument component, and add my root content in there. Like this.
https://github.com/SeanCassiere/nv-rental-clone/blob/0be69d7e42bdc96305498559c24ef4fcfeb238d7/src/routes/__root.tsx#L47-L76
GitHub
nv-rental-clone/src/routes/__root.tsx at 0be69d7e42bdc96305498559c2...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.
passive-yellowOP•15mo ago
Thanks @Sean Cassiere there is some really good stuff in here so thanks for sharing. Your example is a bit more advanced than what I am looking for as I am just learning TSR, but I do see some similarities that may help me. At the moment my root Route is essentially just an outlet so that I have the ability to pass several layout templates (login, sidebar, single-col, etc). My main-layout is just a single col with header and footer. I am trying to get the notFoundComponent to nested under main layout so that the not found page has my header and footer. This is similar to what you did but in my main layout. Anyway, this doesn't seem to work:
```
import { createFileRoute } from '@tanstack/react-router';
import MainLayout from '@/layouts/main-layout/index';
export const Route = createFileRoute('/_main-layout')({
component: MainLayout,
notFoundComponent: () => <div>Main Not Found</div>
});
After some testing, I think I am convinced that I will just have to include the header and footer components to the custom not found component. It does not seem with the routing that you can nest a 404 page under various layouts. Does this makes sense?
passive-yellowOP•15mo ago
Here is my main layout component. Maybe this helps?
passive-yellowOP•15mo ago
Hi. I also discovered catch all splat routes using $. I just added a $.tsx route to _main-layout. This seems to work very well. Can anyone tell me if there are any downsides to this? I am kinda surprised this is not used as an example for custom 404 pages.
passive-yellowOP•15mo ago
