likes
comments
collection
share

灵活的 Remix 路由

作者站长头像
站长
· 阅读数 86

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 路由
  • 最后还是考虑到了路由的转码情况

更多

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

转载自:https://juejin.cn/post/7199659141018337338
评论
请登录