How to hide components on a notFound routes in TanStack Router file routes?

[devalentineomonya]

I’m using TanStack Start (file-based routing) and have a layout route that wraps multiple dashboard pages.

Here is my route.tsx for the / _dashboards layout:

import { createFileRoute, Outlet } from "@tanstack/react-router";

import { AppSidebar } from "@/components/shared/sidebar/app-sidebar";
import { SiteHeader } from "@/components/shared/sidebar/site-header";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";

export const Route = createFileRoute("/_dashboards")({
  component: DashboardRouteComponent,
});

function DashboardRouteComponent() {
  return (
    <SidebarProvider>
      <AppSidebar variant="sidebar" collapsible="icon" />
      <SidebarInset>
        <SiteHeader />
        <div className="flex flex-1 flex-col">
          <Outlet />
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}

Problem

When a user navigates to a non-existent route inside / _dashboards, the Not Found page renders correctly, but the layout components:

• <AppSidebar />
• <SiteHeader />

are still visible.

I tried adding a notFoundComponent to this route:

export const Route = createFileRoute("/_dashboards")({
  component: DashboardRouteComponent,
  notFoundComponent: () => <NotFound />,
});

However, this does not change the behavior — the sidebar and header still render.

Expected Behavior

When a route under / _dashboards is not found, I want:

• AppSidebar hidden
• SiteHeader hidden
• Only the NotFound component rendered

Question

What is the recommended or idiomatic way in TanStack Router to:

• Detect that the current route is a not-found match
• Conditionally disable layout UI (sidebar/header) for that case

Any guidance or examples would be appreciated.

[abhayclasher]

yo! so the notFoundComponent on your layout renders inside the <Outlet />, which is why the sidebar and header are still chillin' there.

to hide 'em, u can check the router state directly in your DashboardRouteComponent. use useRouterState to see if the current matches include a not-found state:

const isNotFound = useRouterState({
  select: (s) => s.matches.some((m) => m.routeId === '/_dashboards/$notFound'), 
})

if (isNotFound) {
  return <Outlet /> // just show the 404 content, skip the layout
}

return (
  <SidebarProvider>
    <AppSidebar ... />
    <SidebarInset>
       <SiteHeader />
       <Outlet />
    </SidebarInset>
  </SidebarProvider>
)

(just double-check your routeId for the not-found match in the devtools). this is probs the cleanest way to keep your layout from wrapping dead links. lmk if that works! ✌️