创建路由器

Router 类

当你准备开始使用你的路由器时，你需要创建一个新的 Router 实例。路由器实例是 TanStack Router 的核心大脑，负责管理路由树、匹配路由以及协调导航和路由转换。它还用作配置路由器范围设置的地方。

tsx

import { createRouter } from '@tanstack/react-router'

const router = createRouter({
  // ...
})

import { createRouter } from '@tanstack/react-router'

const router = createRouter({
  // ...
})

路由树

你可能会很快注意到 Router 构造函数需要一个 routeTree 选项。这是路由器将用于匹配路由和渲染组件的路由树。

无论你使用基于文件的路由还是基于代码的路由，你都需要将你的路由树传递给 createRouter 函数

文件系统路由树

如果你使用我们推荐的基于文件的路由，那么你的生成的路由树文件很可能是在默认的 src/routeTree.gen.ts 位置创建的。如果你使用了自定义位置，那么你需要从该位置导入你的路由树。

tsx

import { routeTree } from './routeTree.gen'

import { routeTree } from './routeTree.gen'

基于代码的路由树

如果你使用基于代码的路由，那么你可能使用根路由的 addChildren 方法手动创建了你的路由树

tsx

const routeTree = rootRoute.addChildren([
  // ...
])

const routeTree = rootRoute.addChildren([
  // ...
])

路由器类型安全

重要

请勿跳过此部分！⚠️

TanStack Router 为 TypeScript 提供了出色的支持，甚至对于你意想不到的事情，例如直接从库中裸导入！为了实现这一点，你必须使用 TypeScript 的声明合并功能注册你的路由器的类型。这是通过扩展 @tanstack/react-router 上的 Register 接口，并带有一个类型为你的 router 实例的 router 属性来完成的

tsx

declare module '@tanstack/react-router' {
  interface Register {
    // This infers the type of our router and registers it across your entire project
    router: typeof router
  }
}

declare module '@tanstack/react-router' {
  interface Register {
    // This infers the type of our router and registers it across your entire project
    router: typeof router
  }
}

注册你的路由器后，你现在将在整个项目中获得与路由相关的任何内容的类型安全。

404 未找到路由

正如之前指南中所承诺的那样，我们现在将介绍 notFoundRoute 选项。此选项用于配置当未找到其他合适匹配项时将渲染的路由。这对于渲染 404 页面或重定向到默认路由非常有用。

如果你正在使用基于文件或基于代码的路由，那么你需要向 createRootRoute 添加一个 notFoundComponent 键

tsx

export const Route = createRootRoute({
  component: () => (
    // ...
  ),
  notFoundComponent: () => <div>404 Not Found</div>,
});

export const Route = createRootRoute({
  component: () => (
    // ...
  ),
  notFoundComponent: () => <div>404 Not Found</div>,
});

其他选项

还有许多其他选项可以传递给 Router 构造函数。你可以在API 参考中找到它们的完整列表。