路由配置

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 关联以及渲染关联组件的过程。

以下是一个使用 routes 文件夹约定的示例目录

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 的子路由。

约定式路由文件夹

对于需要额外模块或资源的路由，可以使用 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 意识到一种尺寸并不适合所有人。有时，提供的约定可能与特定的项目需求或开发者的偏好不一致。在这种情况下，Remix 允许通过 vite.config.ts 进行手动路由配置。这种灵活性确保了开发者可以按照对其项目有意义的方式构建应用程序。

如果您尚未迁移到 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 函数。

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。预计许多应用程序将放弃使用 routes 文件夹约定，而采用 vite.config.ts。