灵活的 Remix 路由

1,132 阅读2分钟

Remix 基于 React Router + FS Like Router 演化而来,最喜欢灵活的路由, 同时也需要花时间来学习的。如果你也对 Remix 的框架感兴趣,这篇文章可以帮助您节省一部分时间

版本

目前的 Remix 版本是: v1.2

目前的版本支持了两种路由方法:

Remix 路由的特点

  • 根路由
  • 页面路由(基础路由)
  • 带有参数页面路由(动态路由)
  • 可选分段路由 (处理不同分段)
  • 布局路由(非页面路由,处理布局,与 Outlet 组件结合)
  • 点分割路由(简化文件夹深度)
  • Splat 路由(特定匹配)
  • 路由转义字符串

根路由 Root Route

到目前为止:使用 v2 版本需要配置 remix.config.js

module.exports = {
  future: {
    v2_routeConvention: true,
  },
};

##3 v1 和 v2 版本没有变化

app/
├── routes/
└── root.tsx // 所有 root 的根

使用 官方的 cli 生成的代码是这样的:

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Outlet 组件就是页面路由的产出。

基础路由 Basic Route

配置位置: /app/routes/

v1 配置基础路由

app/
├── routes/
│   ├── about.tsx // url 路径:/about
│   └── index.tsx // url 路径 : /
└── root.tsx

v2配置基础路由

app/
├── routes/
│   ├── _index.tsx // url 路径 : /
│   └── about.tsx // url 路径:/about
└── root.tsx

我们看到明显的 / 基础路由发生了变化 index.tsx -> index.tsx

动态路由

动态路由的 v1 和 v2 使用基本一样

动态路由一般用于页面参数,如指定文章的 id 的参数,在 remix 中以 $ 开头的变量。

app/
├── routes/
│   ├── blog/
│   │   ├── $postId.tsx // 其中 $postId 动态的路径:/blog/902343、/blog/2342342
│   └── index.tsx // 路径:/
└── root.tsx

可选分段路由 (处理不同分段)

适用于有国际化路由路径的情况。

v1 中可选分段路由

app/
├── routes/
│   ├── ($lang)/
│   │   └── categories.tsx // 路径:/en/categories、/zh/categories、/fr/categories 等
│   └── index.tsx // 路径:/
└── root.tsx

v2 中可选段

注意这里使用了 点分割 这个后面会说明,其实也很简单使用功能 . 来替换 /

app/
├── routes/
│   ├── ($lang)._index.tsx // 路由:/
│   └── ($lang).$productId.tsx //路由: /american-flag-speedo、/en/american-flag-speedo
└── root.tsx

注意:其实就是动态路由中,添加了 () 进行包裹, v1 和 v2 没有发生多大的变化。

布局路由

注意:remix 中 Layout Route 是指的整体的结构,Remix v1 中使用 Pathless Layout Routes 来抽象整体路由

v1 中使用 __Layout 标记组件

app/
├── routes/
│   └── __marketing
│   │   ├── index.tsx // 带有 __marketing 组 件 的路径:/
│   │   └── product.tsx // 带有 __marketing组件 的路径:/product
│   └── __marketing.tsx
└── root.tsx

__marketing.tsx 其实就是带有一个 Outlet 的组件,这个组件在编译后不占有路由 url 字符。Pathless Layout Routes 仅仅 在 v1 中使用。

v2 中使用 _layout 标记

app/
├── routes/
│   ├── _auth.login.tsx
│   ├── _auth.register.tsx
│   ├── _auth.tsx
│   ├── _index.tsx
│   ├── concerts.$city.tsx
│   └── concerts.tsx
└── root.tsx

_auth.tsx 是一个路由组件,能够当作 /auth 单独使用。/login 回放在 _auth.tsx 组件中 <Outlet /> 路由组件。

点分割路由(简化文件夹深度)

点分割路由,其实就是精简文件。

v1/v2版本的点分割路由

app/
├── routes/
│   ├── blog.$postId.tsx
│   ├── blog.categories.tsx
│   ├── blog.index.tsx
│   ├── blog.authors.tsx
│   ├── blog.tsx
│   └── index.tsx // v2 使用 index.tsx
└── root.tsx

Splat 路由(不确定性)

不确定性路由,使用 * 通配符号。

v1 Splat 路由

app/
├── routes/
│   ├── $.tsx
│   ├── about.tsx
│   ├── blog.authors.tsx
│   ├── blog.tsx
│   └── index.tsx
└── root.tsx

这里有 /about/blog/xx/blog/authors/blog 是确定的路由, 和 $.tsx 可以匹配 /somewhere-else

v2 Splat 路由

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

这里可以针对 /files/your/path 其中 /files 前缀的文件夹。

特殊转义字符串

使用 [] 表示转义字符:

  • /routes/[sitemap.xml].tsx -> app/routes/sitemap.xml
  • routes/dolla-bills-[$].tsx -> /dolla-bills-$

小结

  • 灵活的 Remix 路由。在 Remix 框架中,不再需要使用写配置组件或者配置路由
  • 根路由、基础路由、带有参数(动态路由)、分段路由(国际化)、布局路由针对不同的情景
  • 使用点分割路由, Splat 路由
  • 最后还是考虑到了路由的转码情况

更多

关注公踪号 进二开物,交个朋友,更多技术文章...