Route Configuration

路由配置

Remix 路由系统的基本概念之一是使用嵌套路由，这种方法可以追溯到 Ember.js。使用嵌套路由，URL 的各个部分会与数据依赖项和 UI 的组件层次结构耦合。像/sales/invoices/102000这样的 URL 不仅揭示了应用程序中的清晰路径，而且还描绘了不同组件之间的关系和依赖关系。

模块化设计

嵌套路由通过将 URL 分段为多个部分来提供清晰度。每个段都与特定的数据要求和组件直接相关。例如，在 URL /sales/invoices/102000 中，每个段 - sales、invoices 和 102000 - 都可以与特定的数据点和 UI 部分相关联，从而可以在代码库中直观地进行管理。

嵌套路由的一个特点是，嵌套路由树中的多条路由能够匹配单个 URL。这种粒度可确保每条路由主要关注其特定的 URL 段和相关的 UI 部分。这种方法遵循模块化和关注点分离的原则，确保每条路由始终专注于其核心职责。

并行加载

在某些 Web 应用中，数据和资产的顺序加载有时会导致用户体验变慢。即使数据依赖关系不相互依赖，它们也可能按顺序加载，因为它们与渲染层次结构相关联，从而形成不良的请求链。

Remix 利用其嵌套路由系统来优化加载时间。当 URL 与多个路由匹配时，Remix 将并行加载所有匹配路由所需的数据和资产。通过这样做，Remix 有效地避开了链式请求序列的常见陷阱。

这一策略与现代浏览器高效处理多个并发请求的能力相结合，使 Remix 成为提供高响应度和快速 Web 应用程序的领跑者。它不仅能快速获取数据，还能以有组织的方式获取数据，为最终用户提供最佳体验。

常规路由配置

Remix 引入了一个关键约定来帮助简化路由过程：app/routes 文件夹。当开发人员在此文件夹中引入文件时，Remix 会将其固有地理解为路由。此约定简化了定义路由、将其与 URL 关联以及呈现相关组件的过程。

以下是使用路由文件夹约定的示例目录：

app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   ├── concerts._index.tsx
│   ├── concerts.$city.tsx
│   ├── concerts.trending.tsx
│   └── concerts.tsx
└── root.tsx

所有以app/routes/concerts.开头的路由将成为app/routes/concerts.tsx的子路由。

URL	Matched Route	Layout
/	app/routes/_index.tsx	app/root.tsx
/about	app/routes/about.tsx	app/root.tsx
/concerts	app/routes/concerts._index.tsx	app/routes/concerts.tsx
/concerts/trending	app/routes/concerts.trending.tsx	app/routes/concerts.tsx
/concerts/salt-lake-city	app/routes/concerts.$city.tsx	app/routes/concerts.tsx

常规路由文件夹

对于需要额外模块或资产的路由，可以使用 app/routes 内包含 route.tsx 文件的文件夹。此方法：

• 共置模块：它收集与特定路由相关的所有元素，确保逻辑、样式和组件紧密结合。
• 简化导入：通过将相关模块放在一个地方，管理导入变得简单，增强了代码的可维护性。
• 促进自动代码组织：使用 route.tsx 设置本质上可以促进组织良好的代码库，这对应用程序的扩展大有裨益。

上面的相同路由可以按如下方式组织：

app/
├── routes/
│   ├── _index/
│   │   ├── signup-form.tsx
│   │   └── route.tsx
│   ├── about/
│   │   ├── header.tsx
│   │   └── route.tsx
│   ├── concerts/
│   │   ├── favorites-cookie.ts
│   │   └── route.tsx
│   ├── concerts.$city/
│   │   └── route.tsx
│   ├── concerts._index/
│   │   ├── featured.tsx
│   │   └── route.tsx
│   └── concerts.trending/
│       ├── card.tsx
│       ├── route.tsx
│       └── sponsored.tsx
└── root.tsx

您可以在 路由文件约定 参考中阅读有关文件名中的具体模式和其他功能的更多信息。

只有直接位于app/routes下的文件夹才会被注册为路由。深层嵌套的文件夹将被忽略。位于app/routes/about/header/route.tsx的文件不会创建路由。

app/
├── routes/
│   └── about/
│       ├── header/
│       │   └── route.tsx
│       └── route.tsx
└── root.tsx

手动路由配置

虽然 app/routes 文件夹为开发人员提供了一种方便的约定，但 Remix 也意识到 [一刀切并不适合所有人] routes-disclaimer。有时提供的约定可能与特定项目要求或开发人员的偏好不一致。在这种情况下，Remix 允许通过 [vite.config.ts] vite-routes 进行手动路由配置。这种灵活性确保开发人员能够以适合其项目的方式构建其应用程序。

如果您尚未迁移到 Vite 并且仍在使用 Classic Remix Compiler，您可以在 remix.config.js 文件中手动配置路由。

构建应用的常用方法是使用顶级功能文件夹。考虑与特定主题（如音乐会）相关的路由可能共享多个模块。将它们组织在一个文件夹中是有意义的：

app/
├── about/
│   └── route.tsx
├── concerts/
│   ├── card.tsx
│   ├── city.tsx
│   ├── favorites-cookie.ts
│   ├── home.tsx
│   ├── layout.tsx
│   ├── sponsored.tsx
│   └── trending.tsx
├── home/
│   ├── header.tsx
│   └── route.tsx
└── root.tsx

要将此结构配置为与前面的示例相同的 URL，可以使用 vite.config.ts 中的 routes 函数：

vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      routes(defineRoutes) {
        return defineRoutes((route) => {
          route("/", "home/route.tsx", { index: true });
          route("about", "about/route.tsx");
          route("concerts", "concerts/layout.tsx", () => {
            route("", "concerts/home.tsx", { index: true });
            route("trending", "concerts/trending.tsx");
            route(":city", "concerts/city.tsx");
          });
        });
      },
    }),
  ],
});

Remix 的路由配置方法将惯例与灵活性融为一体。您可以使用 app/routes 文件夹，以简单、有序的方式设置路由。如果您想要更多控制权、不喜欢文件名或有特殊需求，可以使用 vite.config.ts。预计许多应用程序会放弃路由文件夹惯例，转而使用 vite.config.ts。