创建 Router

创建 Router

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([
  // ...
])

Router 类型安全

重要提示

不要跳过此部分！⚠️

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 参考中找到它们的完整列表。