创建 Router | TanStack Router Solid 文档

`Router` 类

当您准备好开始使用路由时，您需要创建一个新的 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([
  // ...
])

Router 类型安全

重要

请勿跳过此部分！⚠️

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

创建路由器