创建路由器 | TanStack Router Solid Docs

创建路由器

Router 类

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

tsx

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

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

import { createRouter } from '@tanstack/solid-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([
  // ...
])

路由器类型安全

Important

不要跳过这一部分！⚠️

TanStack Router 为 TypeScript 提供了惊人的支持，甚至包括您不会想到的功能，比如直接从库中进行裸导入！为了实现这一点，您必须使用 TypeScript 的声明合并功能注册路由器的类型。这是通过扩展 @tanstack/solid-router 上的 Register 接口，添加一个类型为您的 router 实例的 router 属性来完成的：

tsx

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

declare module '@tanstack/solid-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 参考中找到完整的列表。