TanStackRouter v1
自动
框架
版本
菜单
开始使用
路由
指南
API
ESLint
Router 示例

快速开始

如果您感到不耐烦，并且希望跳过我们精彩的文档，那么这里是使用基于文件的路由生成和基于代码的路由配置来开始使用 TanStack Router 的最低要求。

使用基于文件的路由生成

基于文件的路由生成（通过 Vite 和其他支持的打包器）是推荐使用 TanStack Router 的方式，因为它以最少的努力提供最佳的体验、性能和人体工程学。

搭建你的第一个 TanStack Router 项目
sh
npx create-tsrouter-app@latest my-app --framework solid --template file-router

npx create-tsrouter-app@latest my-app --framework solid --template file-router

请参阅 create-tsrouter-app 以获取更多选项。

手动设置

或者，您可以按照以下步骤手动设置项目

安装 TanStack Router、Vite 插件和 Router Devtools
sh
npm install @tanstack/solid-router
npm install -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
pnpm add @tanstack/solid-router
pnpm add -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
yarn add @tanstack/solid-router
yarn add -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
bun add @tanstack/solid-router
bun add -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
deno add npm:@tanstack/solid-router npm:@tanstack/router-plugin @tanstack/solid-router-devtools

npm install @tanstack/solid-router
npm install -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
pnpm add @tanstack/solid-router
pnpm add -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
yarn add @tanstack/solid-router
yarn add -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
bun add @tanstack/solid-router
bun add -D @tanstack/router-plugin @tanstack/solid-router-devtools
# or
deno add npm:@tanstack/solid-router npm:@tanstack/router-plugin @tanstack/solid-router-devtools

配置 Vite 插件
tsx
// vite.config.ts
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

// https://vite.ac.cn/config/
export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'solid', autoCodeSplitting: true }),
    solid(),
    // ...,
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

// https://vite.ac.cn/config/
export default defineConfig({
  plugins: [
    TanStackRouterVite({ target: 'solid', autoCodeSplitting: true }),
    solid(),
    // ...,
  ],
})

提示

如果您没有使用 Vite 或任何受支持的打包器，您可以查看 TanStack Router CLI 指南以获取更多信息。

创建以下文件

  • src/routes/__root.tsx
  • src/routes/index.tsx
  • src/routes/about.tsx
  • src/main.tsx

src/routes/__root.tsx
tsx
import { createRootRoute, Link, Outlet } from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

export const Route = createRootRoute({
  component: () => (
    <>
      <div class="p-2 flex gap-2">
        <Link to="/" class="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" class="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

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

export const Route = createRootRoute({
  component: () => (
    <>
      <div class="p-2 flex gap-2">
        <Link to="/" class="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" class="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

src/routes/index.tsx
tsx
import { createLazyFileRoute } from '@tanstack/solid-router'

export const Route = createLazyFileRoute('/')({
  component: Index,
})

function Index() {
  return (
    <div class="p-2">
      <h3>Welcome Home!</h3>
    </div>
  )
}

import { createLazyFileRoute } from '@tanstack/solid-router'

export const Route = createLazyFileRoute('/')({
  component: Index,
})

function Index() {
  return (
    <div class="p-2">
      <h3>Welcome Home!</h3>
    </div>
  )
}

src/routes/about.tsx
tsx
import { createLazyFileRoute } from '@tanstack/solid-router'

export const Route = createLazyFileRoute('/about')({
  component: About,
})

function About() {
  return <div class="p-2">Hello from About!</div>
}

import { createLazyFileRoute } from '@tanstack/solid-router'

export const Route = createLazyFileRoute('/about')({
  component: About,
})

function About() {
  return <div class="p-2">Hello from About!</div>
}

src/main.tsx

无论您是否使用 @tanstack/router-plugin 包并运行 npm run dev/npm run build 脚本，或者手动运行 tsr watch/tsr generate 命令从您的 package 脚本，路由树文件将在 src/routeTree.gen.ts 生成。

导入生成的路由树并创建一个新的 router 实例

tsx
import { render } from 'solid-js/web'
import { RouterProvider, createRouter } from '@tanstack/solid-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/solid-router' {
  interface Register {
    router: typeof router
  }
}

// Render the app
const rootElement = document.getElementById('root')!
if (!rootElement.innerHTML) {
  render(() => <RouterProvider router={router} />, rootElement)
}

import { render } from 'solid-js/web'
import { RouterProvider, createRouter } from '@tanstack/solid-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
const router = createRouter({ routeTree })

// Register the router instance for type safety
declare module '@tanstack/solid-router' {
  interface Register {
    router: typeof router
  }
}

// Render the app
const rootElement = document.getElementById('root')!
if (!rootElement.innerHTML) {
  render(() => <RouterProvider router={router} />, rootElement)
}

如果您正在使用这种模式，您应该将根 <div> 的 id 更改为您的 index.html 文件上的 <div id='root'></div>

使用基于代码的路由配置

重要提示

以下示例展示了如何使用代码配置路由，为了简单起见，本演示将其放在单个文件中。虽然基于代码的生成允许您在单个文件中声明许多路由甚至 router 实例，但我们建议将路由拆分为单独的文件，以便在应用程序增长时更好地组织和提高性能。

tsx
import { render } from 'solid-js/web'
import {
  Outlet,
  RouterProvider,
  Link,
  createRouter,
  createRoute,
  createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

const rootRoute = createRootRoute({
  component: () => (
    <>
      <div class="p-2 flex gap-2">
        <Link to="/" class="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" class="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: function Index() {
    return (
      <div class="p-2">
        <h3>Welcome Home!</h3>
      </div>
    )
  },
})

const aboutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: function About() {
    return <div class="p-2">Hello from About!</div>
  },
})

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])

const router = createRouter({ routeTree })

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

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  render(() => <RouterProvider router={router} />, rootElement)
}

import { render } from 'solid-js/web'
import {
  Outlet,
  RouterProvider,
  Link,
  createRouter,
  createRoute,
  createRootRoute,
} from '@tanstack/solid-router'
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

const rootRoute = createRootRoute({
  component: () => (
    <>
      <div class="p-2 flex gap-2">
        <Link to="/" class="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" class="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: function Index() {
    return (
      <div class="p-2">
        <h3>Welcome Home!</h3>
      </div>
    )
  },
})

const aboutRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/about',
  component: function About() {
    return <div class="p-2">Hello from About!</div>
  },
})

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])

const router = createRouter({ routeTree })

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

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  render(() => <RouterProvider router={router} />, rootElement)
}

如果您忽略了这些示例或没有理解某些内容，我们不会责怪您，因为要真正利用 TanStack Router 还有很多东西要学习！让我们继续前进。

在 GitHub 上编辑
安装
Devtools
订阅 Bytes

您的每周 JavaScript 新闻。每周一免费发送给超过 100,000 名开发人员。

Bytes

无垃圾邮件。随时取消订阅。