T
TanStack•5mo ago
fascinating-indigo

How to hide the app layout on some routes

I am porting our app to @tanstack/router and loving it. There is one niche use-case that I am not able to solve, but I assume this is because I dont use the correct approach. The general layout of our app is defined in routes/__root.tsx similar to this much simplified example: 
<SetupContext>
  <div>
    <PageHeader />
    <main><Outlet /></main>
  </div>
</SetupContext>
<SetupContext>
  <div>
    <PageHeader />
    <main><Outlet /></main>
  </div>
</SetupContext>
But we have a few specific nested routes (3 or 4 levels deep) that need to not render the <PageHeader /> component, because they use a specific "full-screen" layout so the content can take the whole window. How would you do this with Tanstack Router? I looked into non-nested routes, but what would be needed here is: - an always present root route with SetupContext (which in reality is more involved that that) - a layout that inserts PageHeader /> applied to all routes, except the few full-screen ones that need to opt-out of this one I also tried to see if I could somehow pass a displayPageHeader parameter from a child route to the main layout, but that seems like a bad idea. Any suggestions?
3 Replies
correct-apricot
correct-apricot•5mo ago
you can: a) choose a different layout in root depending on location b) opt out of the parent layouts for the nested routes (e.g. via the _ suffix) if you have a complete minimal example we can have a closer look
fascinating-indigo
fascinating-indigoOP•5mo ago
I was preparing a minimal example, stumbled upon the router context page, and I think I have something working with: 
  const hideHeader = useRouterState({
    select: (s) => s.matches.some((m) => m.context.hideHeader),
  })
  const hideHeader = useRouterState({
    select: (s) => s.matches.some((m) => m.context.hideHeader),
  })
I can now set beforeLoad: () => ({ hideHeader: true }) in a route, and the root layout will know when to skil rendering the header.
correct-apricot
correct-apricot•5mo ago
yes that's a nice approach

Did you find this page helpful?