Building your application

路由

编辑此页面

路由是 Web 应用程序的一个关键组件。在 SolidStart 中，路由有两种类型：

  • UI 路由 — 定义应用程序的用户界面
  • API 路由 — 定义应用程序的 serverless 函数

要了解更多关于 API 路由的信息，请参阅 API 路由章节。

创建新路由

SolidStart 使用基于文件的路由，这是一种通过在项目中创建文件和文件夹来定义路由的方式。这种方式包括你的页面和 API 路由。

SolidStart 会遍历你的 routes 目录，收集所有路由，然后通过 <FileRoutes /> 使它们可以被访问。

这个组件将只包含你的 UI 路由，而不包含 API 路由。无需在 Router 组件中手动定义每个 Route，<FileRoutes /> 将基于文件系统为你生成路由。

因为 <FileRoutes /> 返回一个路由配置对象，你可以将其与你选择的路由器一起使用。在这个例子中，我们使用 solid-router：

app.tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";


export default function App() {
  return (
    <Router root={(props) => <Suspense>{props.children}</Suspense>}>
      <FileRoutes />
    </Router>
  );
}

<Router /> 组件需要一个 root 属性作为整个应用程序的根布局。你需要确保props.children 被包裹在 <Suspense /> 中，因为每个组件都会自动懒加载。如果没有这个，你可能会看到一些意外的水合错误。

<FileRoutes /> 将为 routes 目录及其子目录中的每个文件生成路由。要将路由渲染为页面，它必须默认导出一个组件。这个组件代表用户访问页面时将渲染的内容：

export default function Index() {
  return <div>Welcome to my site!</div>;
}

这意味着你只需要在 routes 文件夹中创建一个文件，SolidStart 就会处理好让该路由在你的应用程序中可访问所需要的一切！

基于文件的路由

routes 目录中的每个文件都被视为一个路由。要在应用程序中创建新的路由或页面，只需在 routes 目录中创建一个新文件。文件名将成为路由的 URL 路径：

  • example.com/blog ➜ /routes/blog.tsx
  • example.com/contact ➜ /routes/contact.tsx
  • example.com/directions ➜ /routes/directions.tsx

嵌套路由

如果你需要嵌套路由，你可以创建一个与前置路由段同名的目录，并在该目录中创建新文件：

  • example.com/blog/article-1 ➜ /routes/blog/article-1.tsx
  • example.com/work/job-1 ➜ /routes/work/job-1.tsx

当文件命名为 index 时，它将匹配没有其他 URL 路由段时的目录：

  • example.com ➜ /routes/index.tsx
  • example.com/socials ➜ /routes/socials/index.tsx

嵌套布局

如果你想创建嵌套布局，你可以创建一个与路由文件夹同名的文件。

|-- routes/
    |-- blog.tsx                   // layout file
    |-- blog/
        |-- article-1.tsx         // example.com/blog/article-1
        |-- article-2.tsx        // example.com/blog/article-2

在这种情况下，blog.tsx 文件将作为 blog 文件夹中文章的布局。你可以使用props.children 在布局中引用子内容。

注意：创建 blog/index.tsx 或 blog/(blogIndex).tsx 并不相同，因为它只会用于索引路由。

重命名索引

默认情况下，路由渲染的组件来自每个文件夹中 index.tsx 文件的默认导出。然而，这可能会使搜索正确的 index.tsx 文件变得困难，因为会有多个同名文件。

为了避免这种情况，你可以将 index.tsx 文件重命名为它所在文件夹的名称，并用括号括起来。

这样，它将被视为该路由的默认导出：

|-- routes/                       // example.com
    |-- blog/
        |-- article-1.tsx         // example.com/blog/article-1
        |-- article-2.tsx
    |-- work/
        |-- job-1.tsx             // example.com/work/job-1
        |-- job-2.tsx
    |-- socials/
        |-- (socials).tsx           // example.com/socials

转义嵌套路由

当你有一个嵌套的路径但希望它有单独的布局时，你可以通过在 ( ) 之间添加名称来转义嵌套路由。这将允许你创建一个不在前一个路由下嵌套的新路由：

|-- routes/                       // example.com
    |-- users/
        |-- index.tsx            // example.com/users
        |-- projects.tsx         // example.com/projects
    |-- users(details)/
        |-- [id].tsx            // example.com/users/1

此外，你还可以包含它们自己的嵌套布局：

|-- routes/
    |-- users.tsx
    |-- users(details).tsx
    |-- users/
        |-- index.tsx
        |-- projects.tsx
    |-- users(details)/
        |-- [id].tsx

动态路由

动态路由是可以匹配路由段中任何值的路由。当你的 URL 路径包含动态段时，使用方括号（[]）来定义动态段：

  • example.com/users/:id ➜ /routes/users/[id].tsx
  • example.com/users/:id/:name ➜ /routes/users/[id]/[name].tsx
  • example.com/*missing ➜ /routes/[...missing].tsx

这允许你创建一个可以匹配 UR L路径中该段任意值的单一路由。例如，/users/1 和 /users/2 都是有效的路由，与其为每个用户定义单独的路由，你可以使用动态路由来匹配 id 段的任意值。

|-- routes/
    |-- users/
        |-- [id].tsx

例如，使用 solid-router，你可以使用 useParams hook 来匹配动态段：

routes/users/[id].tsx
import { useParams } from "@solidjs/router";


export default function UserPage() {
  const params = useParams();
  return <div>User {params.id}</div>;
}

可选参数

如果你的路由中有可选参数，你可以使用双方括号（[[id]]）来定义动态段。这将匹配有参数或无参数的路由。

|-- routes/
    |-- users/
        |-- [[id]].tsx

在这种情况下，可以匹配的一些页面包括：

  • /users
  • /users/1
  • /users/abc

Catch-all 路由

Catch-all 路由是一种特殊的动态路由，可以匹配任意数量的段。它们使用方括号加上 ... 在路由标签前定义（例如 [...post]）。

|-- routes/
    |-- blog/
        |-- index.tsx
        |-- [...post].tsx

catch-all 路由将有一个参数，这是最后一个有效段之后所有 URL 段的正斜杠分隔字符串。例如，对于路由 [...post] 和 URL 路径 /post/foo，useParams 返回的 params 对象将有一个post 属性，值为 post/foo 。对于 URL 路径 /post/foo/baz，它将是 post/foo/baz。

routes/blog/[...post].tsx
import { useParams } from "@solidjs/router";


export default function BlogPage() {
  const params = useParams();
  return <div>Blog {params.post}</div>;
}

路由组

使用路由组，你可以以适合你应用程序的方式组织路由，而不会影响 URL 结构。由于基于文件的路由是基于文件系统的，要以合理的方式组织路由可能会比较困难。

在 SolidStart 中，路由组是通过在文件夹名称周围使用括号（）来定义的：

|-- routes/
    |-- (static)
        |-- about-us                // example.com/about-us
            |-- index.tsx
        |-- contact-us              // example.com/contact-us
            |-- index.tsx

附加路由配置

SolidStart 提供了一种在文件系统之外添加额外路由配置的方法。由于 SolidStart 支持使用其他路由器，你可以使用 route 导出提供的 <FileRoutes /> 来定义你所选择的路由器的路由配置。

报告此页面问题