路由配置

¥Route Configuration

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

¥One of the foundational concepts in Remix's routing system is the use of nested routes, an approach that traces its roots back to Ember.js. With nested routes, segments of the URL are coupled to both data dependencies and the UI's component hierarchy. A URL like /sales/invoices/102000 not only reveals a clear path in the application but also delineates the relationships and dependencies for different components.

模块化设计

¥Modular Design

嵌套路由通过将 URL 分割成多个部分来提高清晰度。每个段都与特定的数据需求和组件直接相关。例如，在 URL /sales/invoices/102000 中，每个段 - sales、invoices 和 102000 - 可以与特定的数据点和 UI 部分关联，使其在代码库中管理起来更加直观。

¥Nested routes provide clarity by segmenting URLs into multiple parts. Each segment directly correlates with a particular data requirement and component. For instance, in the URL /sales/invoices/102000, each segment - sales, invoices, and 102000 - can be associated with specific data points and UI sections, making it intuitive to manage in the codebase.

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

¥A feature of nested routing is the ability for several routes in the nested route tree to match a single URL. This granularity ensures that each route is primarily focused on its specific URL segment and related slice of UI. This approach champions the principles of modularity and separation of concerns, ensuring each route remains focused on its core responsibilities.

并行加载

¥Parallel Loading

在某些 Web 应用中，数据和资源的顺序加载有时会导致用户体验人为变慢。即使数据依赖并非相互依赖，它们也可能按顺序加载，因为它们与渲染层次结构耦合，从而创建了不良的请求链。

¥In some web applications, the sequential loading of data and assets can sometimes lead to an artificially slow user experience. Even when data dependencies aren't interdependent, they may be loaded sequentially because they are coupled to rendering hierarchy, creating an undesirable chain of requests.

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

¥Remix leverages its nested routing system to optimize load times. When a URL matches multiple routes, Remix will load the required data and assets for all matching routes in parallel. By doing this, Remix effectively sidesteps the conventional pitfall of chained request sequences.

此策略与现代浏览器高效处理多个并发请求的能力相结合，使 Remix 在提供高响应度和快速 Web 应用方面处于领先地位。它不仅仅是为了快速获取数据；它会以有组织的方式获取数据，以便为终端用户提供最佳体验。

¥This strategy, combined with modern browsers' ability to handle multiple concurrent requests efficiently, positions Remix as a front-runner in delivering highly responsive and swift web applications. It's not just about making your data fetching fast; it's about fetching it in an organized way to provide the best possible experience for the end user.

常规路由配置

¥Conventional Route Configuration

Remix 引入了一个关键约定来帮助简化路由流程：app/routes 文件夹。当开发者在此文件夹中引入文件时，Remix 会将其视为路由。此约定简化了定义路由、将路由与 URL 关联以及渲染相关组件的过程。

¥Remix introduces a key convention to help streamline the routing process: the app/routes folder. When a developer introduces a file within this folder, Remix inherently understands it as a route. This convention simplifies the process of defining routes, associating them with URLs, and rendering the associated components.

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

¥Here's a sample directory that uses the routes folder convention:

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

¥All the routes that start with app/routes/concerts. will be child routes of app/routes/concerts.tsx.

常规路由文件夹

¥Conventional Route Folders

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

¥For routes that require additional modules or assets, a folder inside of app/routes with a route.tsx file can be used. This method:

• 模块共置：它收集与特定路由相关的所有元素，确保逻辑、样式和组件紧密结合。

  ¥Co-locates Modules: It gathers all elements connected to a particular route, ensuring logic, styles, and components are closely knit.

• 简化导入：将相关模块集中到一处，管理导入变得简单，从而增强了代码的可维护性。

  ¥Simplifies Imports: With related modules in one place, managing imports becomes straightforward, enhancing code maintainability.

• 促进自动代码组织：使用 route.tsx 设置本身可以促进代码库的井然有序，这对应用的扩展非常有益。

  ¥Facilitates Automatic Code Organization: Using the route.tsx setup inherently promotes a well-organized codebase, beneficial as the application scales.

上面的相同路由可以改为如下组织：

¥The same routes from above could instead be organized like this:

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

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

¥You can read more about the specific patterns in the file names and other features in the Route File Conventions reference.

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

¥Only the folders directly beneath app/routes will be registered as a route. Deeply nested folders are ignored. The file at app/routes/about/header/route.tsx will not create a route.

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

手动路由配置

¥Manual Route Configuration

虽然 app/routes 文件夹为开发者提供了便捷的约定，但 Remix 更欣赏 没有万能的解决方案 文件夹。有时，提供的约定可能与特定项目要求或开发者的偏好不符。在这种情况下，Remix 允许通过 vite.config.ts 手动配置路由。这种灵活性确保开发者能够以适合其项目的方式构建应用。

¥While the app/routes folder offers a convenient convention for developers, Remix appreciates that one size doesn't fit all. There are times when the provided convention might not align with specific project requirements or a developer's preferences. In such cases, Remix allows for manual route configuration via vite.config.ts. This flexibility ensures developers can structure their application in a way that makes sense for their project.

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

构建应用的常用方法是使用顶层功能文件夹。假设与特定主题（例如音乐会）相关的路由可能共享多个模块。将它们组织在一个文件夹下是合理的：

¥A common way to structure an app is by top-level features folders. Consider that routes related to a particular theme, like concerts, likely share several modules. Organizing them under a single folder makes sense:

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 函数：

¥To configure this structure into the same URLs as the previous examples, you can use the routes function in 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。

¥Remix's route configuration approach blends convention with flexibility. You can use the app/routes folder for an easy, organized way to set up your routes. If you want more control, dislike the file names, or have unique needs, there's vite.config.ts. It is expected that many apps forgo the routes folder convention in favor of vite.config.ts.