路由配置

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

常规路由文件夹

对于需要额外模块或资源的路由，可以使用 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，并且仍在使用经典 Remix 编译器，则可以在您的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。预计许多应用程序会放弃路由文件夹约定，转而使用vite.config.ts。