Tanstack Router

向军大叔每晚八点在 抖音 和 bilibli 直播

Router Hook

下面定义 Tanstack Rourter 的hook，使用项目的文件结构更清晰

import { routeTree } from '@/routeTree.gen'
import { createRouter, RouterProvider } from '@tanstack/react-router'

const router = createRouter({
  routeTree,
  defaultNotFoundComponent: () => <div>not found</div>,
})

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

export const useRouter = () => {
  return { router, RouterProvider }
}

然后在 App.tsx 组件中使用

import { useAppQuery } from './hooks/useAppQuery'
import { useRouter } from './hooks/useRooter'

export const App = () => {
  const { AppQueryProvider } = useAppQuery()
  const { router, RouterProvider } = useRouter()
  return (
    <AppQueryProvider>
      <RouterProvider router={router} />
    </AppQueryProvider>
  )
}