Implementing Global NotFound Page with SSR using Vinxi and TanStack Router #1164

AndrejNemec · 2024-02-09T15:06:15Z

AndrejNemec
Feb 9, 2024

Hello,

I'm encountering a challenge with my SSR application using Vinxi and TanStack Router, specifically with implementing a global NotFound page for routes that do not exist. My application uses file-based routing, and while defined routes render correctly, undefined routes do not render within the __root.tsx component as expected. Here's the relevant code setup:

export const Route = createRootRoute({
    component: Root
});

function Root() {
    return (
        <html lang="en">
            <head>
                <link rel="icon" href="/favicon.ico" />
                <Meta />
            </head>
            <body>
                <div className="p-2 flex gap-2">
                    <Link to="/" className="[&.active]:font-bold">Home</Link>{' '}
                    <Link to="/about" className="[&.active]:font-bold">About</Link>
                    <Link to="/notfound" className="[&.active]:font-bold">Not found</Link>
                </div>
                <hr />
                <Outlet />
                <TanStackRouterDevtools />
                <Scripts />
            </body>
        </html>
    );
}

For routes / and /about, everything renders as expected. However, navigating to an undefined route does not trigger the __root.tsx layout to wrap around the NotFound page. Instead, it directly outputs a basic Not Found message without applying any of the root component's layout or styles.

HTML result:

<link rel="modulepreload" href="/_build/@fs/.../test/apps/basic/app/client.tsx"/>
<p>Not Found</p>
<script>window.manifest = {}</script><script type="module" src="/_build/@fs/.../test/apps/basic/app/client.tsx" async=""></script>

I've attempted the following methods without success:

Using a deprecated NotFoundRoute approach, which technically works but isn't ideal because it is deprecated:

notFoundRoute: new NotFoundRoute({
    getParentRoute: () => rootRoute,
    component: () => <div>not found</div>
});

Applying a notFoundComponent to the __root component in hopes of enforcing the root layout for not found pages. However, the issue persists: my code is not encapsulated by the __root layout for undefined routes.

I am looking for guidance on how to properly implement a global NotFound page using the current version of TanStack Router that integrates seamlessly with SSR and file-based routing. The documentation seems unclear on this, and I haven't found any examples that address a global NotFound scenario in this context.

Could anyone provide insights or point me toward an example or documentation that clearly explains how to set this up?

Thank you in advance for your help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Implementing Global NotFound Page with SSR using Vinxi and TanStack Router #1164

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Implementing Global NotFound Page with SSR using Vinxi and TanStack Router #1164

Uh oh!

Uh oh!

AndrejNemec Feb 9, 2024

Replies: 0 comments

AndrejNemec
Feb 9, 2024