Remix路由详解

在 Remix 框架中，路由是可以通过文件系统的路径或者通过配置文件进行定义。通过文件系统定义，需要遵守 Remix 的规则，页面必须放到/app/roures目录下，这样访问 url 直接映射到页面或者组件的路径上。同时，Remix 也支持通过配置文件进行定义，在 Vite config 中添加 Route 配置。

基本路由规则

所有在 /app/routes 下的文件最终会形成应用的路由。_index.tsx 是根路由文件

app/
├── routes/
│   ├── _index.tsx
│   └── about.tsx
└── root.tsx

URL	Matched Routes
/	app/routes/_index.tsx
/about	app/routes/about.tsx

. 分隔符

文件名中的"."在 URL 会当做 “/”，后缀的 “.” 除外，例如 .tsx。

app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   ├── concerts.trending.tsx
│   ├── concerts.salt-lake-city.tsx
│   └── concerts.san-diego.tsx
└── root.tsx

URL	Matched Route
/	app/routes/_index.tsx
/about	app/routes/about.tsx
/concerts/trending	app/routes/concerts.trending.tsx
/concerts/salt-lake-city	app/routes/concerts.salt-lake-city.tsx
/concerts/san-diego	app/routes/concerts.san-diego.tsx

动态参数

路由支持动态参数，例如 /api/employees/{id}，id 是从路径中获取的动态值。

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

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

嵌套路由

如果在"." 文件名可以匹配到一个路由文件，那么当前这个路由就是子路由。concerts 开头的路由就是concerts 的子路由，主要用于组件的渲染，子路由会显示在父路由的 outlet 中。如果不想让某个路由走这个嵌套规则，可以在文件名中添加一个_，例如 concerts_.mine.js, 那么 /concerts/mine 走的还是 root layout。

app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   ├── concerts._index.tsx
│   ├── concerts.$city.tsx
│   ├── concerts.trending.tsx
│   └── concerts.tsx
└── root.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/
│   ├── ($lang)._index.tsx
│   ├── ($lang).$productId.tsx
│   └── ($lang).categories.tsx
└── root.tsx

URL	Matched Route
/	app/routes/($lang)._index.tsx
/categories	app/routes/($lang).categories.tsx
/en/categories	app/routes/($lang).categories.tsx
/fr/categories	app/routes/($lang).categories.tsx
/american-flag-speedo	app/routes/($lang)._index.tsx
/en/american-flag-speedo	app/routes/($lang).$productId.tsx
/fr/american-flag-speedo	app/routes/($lang).$productId.tsx

通配

动态参数只能 / 与 / 之间的字符，通配可以匹配所有包括 / 。

app/
├── routes/
│   ├── _index.tsx
│   ├── $.tsx
│   ├── about.tsx
│   └── files.$.tsx
└── root.tsx

URL	Matched Route
/	app/routes/_index.tsx
/about	app/routes/about.tsx
/beef/and/cheese	app/routes/$.tsx
/files	app/routes/files.$.tsx
/files/talks/remix-conf_old.pdf	app/routes/files.$.tsx
/files/talks/remix-conf_final.pdf	app/routes/files.$.tsx
/files/talks/remix-conf-FINAL-MAY_2022.pdf	app/routes/files.$.tsx

Vite config

通过文件进行配置，修改根目录下的 vite.conf.ts。

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

export default defineConfig({
  plugins: [
    remix({
      routes: async (defineRoutes) => {
        // If you need to do async work, do it before calling `defineRoutes`, we use
        // the call stack of `route` inside to set nesting.

        return defineRoutes((route) => {
          // A common use for this is catchall routes.
          // - The first argument is the React Router path to match against
          // - The second is the relative filename of the route handler
          route("/some/path/*", "catchall.tsx");

          // if you want to nest routes, use the optional callback argument
          route("some/:path", "some/route/file.js", () => {
            // - path is relative to parent path
            // - filenames are still relative to the app directory
            route("relative/path", "some/other/file");
          });
        });
      },
    }),
  ],
});

Remix 会将两种类型的路由进行合并，Remix 目前不支持动态修改路由，只能通过逻辑判断进行控制。