SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场remix-v2-routing

remix-v2-routing

前端与建站

查看项目

更新于 10-16 14:57

技能介绍

用途

Remix v2 Routing 是一个面向 Remix v2 路由模式的技术参考技能，帮助开发者在实现 flat-routes v2 约定、路由文件命名、嵌套布局、资源路由或 root.tsx 脚手架时快速查阅正确用法。

主要能力

技能内容以速查表形式组织，覆盖以下方面：

  • Flat-routes v2 文件名规则：所有文件位于 app/routes/ 目录下。示例包括 _index.tsx 对应 /；concerts.tsx 在存在点分子文件时作为布局，否则作为 /concerts 的叶子路由；concerts._index.tsx 在布局下渲染 /concerts；concerts.$city.tsx 对应 /concerts/:city 并通过 params.city 取值；concerts.trending.tsx 对应 /concerts/trending；_auth.tsx 与 _auth.login.tsx 组成无路径布局，URL 为 /login；files.$.tsx 对应 /files/* 并通过 params["*"] 取值；($lang).index.tsx 对应 / 与 /en 等可选段；sitemap[.]xml.tsx 对应 /sitemap.xml（转义字面量）；concerts.mine.tsx 对应 /concerts/mine，退出布局嵌套；dashboard/route.tsx 对应 /dashboard；reports.$id[.pdf].tsx 对应 /reports/:id.pdf 且无默认导出时作为资源路由。

  • 导入约定：始终使用 @remix-run/react，而非 react-router-dom。类型定义从 @remix-run/node（或 /cloudflare、/deno）导入 LoaderFunctionArgs。

  • 文件命名约定：文件名中的点号生成 URL 斜杠及父子嵌套关系；下划线前缀标记无路径段（_auth.tsx）与 index 路由（index.tsx）；末尾下划线（concerts.mine.tsx）在保持 URL 嵌套的同时退出布局嵌套；方括号转义字面字符（sitemap[.]xml.tsx）；美元符号表示 splat（$.tsx 通过 params["*"] 暴露路径剩余部分）；圆括号包裹可选段（($lang)）。

  • 嵌套布局：父模块（如 concerts.tsx）渲染 Outlet，子路由（concerts.$city.tsx、concerts._index.tsx）依据点分文件名自动挂载其中。无 URL 贡献的布局以单下划线为前缀（如 _auth.tsx 包裹 /login、/signup）。

  • 动态段与 Splat：$name 捕获单个段；$.tsx 捕获路径剩余部分。loader 通过 params 接收值。Splat 值位于 "" 键下，需使用 params[""] 括号访问，不存在 params.splat。

  • Root 模块：app/root.tsx 是唯一必需的路由，负责文档外壳，必须渲染 Meta、Links、Outlet、ScrollRestoration、Scripts，以及开发期间的 LiveReload。

  • 资源路由：不带默认导出的路由模块即资源路由，返回原始 Response 对象（PDF、JSON、RSS、webhook 等）。父 loader 不会运行，指向它的 Link 必须使用 reloadDocument（或替换为 a 标签）以触发真实文档请求。

  • 决策门（decision sequencing）：分两组按顺序回答。布局与扁平 URL 组：是否存在共享界面元素→共享则用点分嵌套，否则回退；URL 恰好嵌套但需独立渲染→使用末尾下划线；需要包裹布局但无父 URL 段→使用单下划线无路径父级。UI 路由与资源路由组：是否渲染 HTML→导出默认组件；是否返回 JSON、PDF、RSS、sitemap、webhook 或其他原始 Response→省略默认导出，成为资源路由，并对指向它的 Link 使用 reloadDocument。_index.tsx 与 index.tsx 组：在 Remix v2 且使用 flat-routes 时用 _index.tsx；若需保留 v1 嵌套文件夹树，安装 @remix-run/v1-route-convention 并在 remix.config.js 中配置。

  • v1 与 v2 约定对比：index 路由 v1 为 index.tsx、v2 为 _index.tsx；无路径布局 v1 为 __auth/（双下划线）、v2 为 _auth.tsx（单下划线）；嵌套 URL v1 用文件夹层级、v2 用文件名点分隔；动态段 $param.tsx 两者相同；Splat $.tsx 两者相同；转义字面量 v1 不适用、v2 用 [.] 与 [] 括号；退出布局 v1 移出文件夹、v2 用末尾下划线；共存 v1 为文件夹内相邻文件、v2 为 feature/route.tsx 加同级文件；回退适配器 v1 不适用、v2 为 @remix-run/v1-route-convention。

使用方式

该技能以速查表、决策门和代码示例形式提供参考内容。当需要确定路由文件名、嵌套结构或路由类型时，可依据决策门按顺序判断，或查阅对应文件名对照表。详细内容分布在相关参考文档中：conventions.md 提供完整文件名语法与边界情况；root.md 提供 root.tsx 脚手架与必需文档元素；resource-routes.md 说明非 HTML 响应、无默认导出规则、父 loader 跳过与 reloadDocument；v1-migration.md 说明 v1 到 v2 的差异（双下划线文件夹、index.tsx、@remix-run/v1-route-convention、ignoredRouteFiles）。

适用场景

适用于 Remix v2 项目中的路由设计工作，包括为页面选择扁平或嵌套 URL 结构、编写动态段与 splat 路由、创建无路径布局、构建返回原始响应的 API 或文件资源路由，以及从 v1 嵌套文件夹约定迁移到 v2 flat-routes 约定。

限制

资料未提供安装命令、依赖版本要求、框架最低版本或平台兼容性说明。该技能内容为路由约定参考，不涉及运行时行为、性能数据或具体项目配置细节，这些信息暂未提供。