64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { TanStackDevtools } from '@tanstack/react-devtools'
|
|
import type { QueryClient } from '@tanstack/react-query'
|
|
import {
|
|
createRootRouteWithContext,
|
|
HeadContent,
|
|
Scripts,
|
|
} from '@tanstack/react-router'
|
|
import type { ReactNode } from 'react'
|
|
import { ErrorComponent } from '@/components/Error'
|
|
import { NotFoundComponent } from '@/components/NotFount'
|
|
import { devtools as queryDevtools } from '@/integrations/tanstack-query'
|
|
import { devtools as routerDevtools } from '@/integrations/tanstack-router'
|
|
import appCss from '@/styles.css?url'
|
|
|
|
export interface RouterContext {
|
|
queryClient: QueryClient
|
|
}
|
|
|
|
export const Route = createRootRouteWithContext<RouterContext>()({
|
|
head: () => ({
|
|
meta: [
|
|
{
|
|
charSet: 'utf-8',
|
|
},
|
|
{
|
|
name: 'viewport',
|
|
content: 'width=device-width, initial-scale=1',
|
|
},
|
|
{
|
|
title: 'Fullstack Starter',
|
|
},
|
|
],
|
|
links: [
|
|
{
|
|
rel: 'stylesheet',
|
|
href: appCss,
|
|
},
|
|
],
|
|
}),
|
|
shellComponent: RootDocument,
|
|
errorComponent: () => <ErrorComponent />,
|
|
notFoundComponent: () => <NotFoundComponent />,
|
|
})
|
|
|
|
function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
|
|
return (
|
|
<html lang="zh-Hans">
|
|
<head>
|
|
<HeadContent />
|
|
</head>
|
|
<body>
|
|
{children}
|
|
<TanStackDevtools
|
|
config={{
|
|
position: 'bottom-right',
|
|
}}
|
|
plugins={[routerDevtools, queryDevtools]}
|
|
/>
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|