__root.tsx
1 import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router' 2 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools' 3 import { TanStackDevtools } from '@tanstack/react-devtools' 4 5 import Header from '../components/Header' 6 7 import appCss from '../styles.css?url' 8 9 export const Route = createRootRoute({ 10 head: () => ({ 11 meta: [ 12 { 13 charSet: 'utf-8', 14 }, 15 { 16 name: 'viewport', 17 content: 'width=device-width, initial-scale=1', 18 }, 19 { 20 title: 'TanStack Start Starter', 21 }, 22 ], 23 links: [ 24 { 25 rel: 'stylesheet', 26 href: appCss, 27 }, 28 ], 29 }), 30 31 shellComponent: RootDocument, 32 }) 33 34 function RootDocument({ children }: { children: React.ReactNode }) { 35 return ( 36 <html lang="en"> 37 <head> 38 <HeadContent /> 39 </head> 40 <body> 41 <Header /> 42 {children} 43 <TanStackDevtools 44 config={{ 45 position: 'bottom-right', 46 }} 47 plugins={[ 48 { 49 name: 'Tanstack Router', 50 render: <TanStackRouterDevtoolsPanel />, 51 }, 52 ]} 53 /> 54 <Scripts /> 55 </body> 56 </html> 57 ) 58 }