技术分享Sep 12, 20261 分钟阅读更新于 Sep 12, 2026

05- 安装 Tanstack Router

这里写一句话简短摘要（用于 SEO 描述和列表预览卡片，建议 50-100 字）

安装依赖

pnpm add @tanstack/react-router

pnpm add -D @tanstack/router-plugin

tanstack router 必须在 react 插件之前添加

import tailwindcss from '@tailwindcss/vite'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import { defineConfig } from 'vite'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tanstackRouter({
    target: 'react',
    autoCodeSplitting: true,
   }),
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(import.meta.dirname, './src'), // 👈 改为 import.meta.dirname
    },
  },
})

import ReactDOM from 'react-dom/client'

import { createRouter, RouterProvider } from '@tanstack/react-router'
import '@workspace/ui/globals.css'
import { routeTree } from './routeTree.gen.ts'
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const router = createRouter({
  routeTree,
})

const rootElement = document.getElementById('root')!

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(<RouterProvider router={router} />)
}

创建 ./src/routes/__root.tsx 文件

import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <>
      <div className="flex gap-2 bg-gray-100 p-2 text-lg">
        <Link
          to="/"
          activeProps={{
            className: 'font-bold',
          }}
          activeOptions={{ exact: true }}
        >
          Home
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools position="bottom-right" />
    </>
  )
}