equal-aqua

💡 Need Help with TanStack Router Layouts

Hey everyone 👋 I’m working on a React project with TypeScript and TanStack Router, and I’m a bit stuck with creating two different layouts. 👉 Here’s the setup I want: - Main Layout → Navbar + Footer + <Outlet /> (for public pages like About, Pricing, Contact). - Dashboard Layout → A totally different layout (no Navbar/Footer from the root). It should have a Sidebar (on the left) and a small navbar/header (just for Logo or Settings). The dashboard pages (like Manage Users, Add Money, etc.) should be displayed on the right side. The issue: My main layout works fine with Navbar/Footer. But when I click the Dashboard link after login, I want the layout to switch to the Dashboard layout. Basically: /about, /pricing, /contact→ Use Main Layout /dashboard/* → Use Dashboard Layout (completely separate from the root Navbar/Footer). ❓ My Question: What’s the best way to structure this in TanStack Router? How do you usually set up multiple layouts (like __root.tsx for public pages and a separate __layout.tsx for dashboard)? Thanks in advance 🙏

7 Replies