全书目录

第三十一篇：Remix 完全指南 —— Web 原生航运港宇宙

七、文件路由：泊位编号怎么映射成航线

1 分钟 296 字 第 570 / 962 个阅读单元

Remix 很强调文件系统路由。你建文件，不只是建组件，而是在港区里加新泊位。

比如：

text
app/
├── root.tsx
└── routes/
    ├── _index.tsx
    ├── ships.tsx
    ├── ships._index.tsx
    ├── ships.new.tsx
    ├── ships.$shipId.tsx
    ├── ships.$shipId.edit.tsx
    ├── _auth.tsx
    ├── _auth.login.tsx
    └── reports.daily.tsx

大致会映射成：

text
/_index.tsx              -> /
/ships.tsx               -> /ships
/ships._index.tsx        -> /ships
/ships.new.tsx           -> /ships/new
/ships.$shipId.tsx       -> /ships/:shipId
/ships.$shipId.edit.tsx  -> /ships/:shipId/edit
/_auth.login.tsx         -> /login
/reports.daily.tsx       -> /reports/daily

几个常见规则：

  • _index.tsx：当前父路由下的索引页
  • $id：动态参数
  • 前导下划线 _auth：路径里不出现，但参与布局嵌套
  • 点号 .：URL 层级
  • 也可以用文件夹组织路由

用港口语言翻译就是：

  • ships.tsx 是“船舶港区总入口”
  • ships.$shipId.tsx 是“具体某条船的泊位”
  • _auth.tsx 是“统一安检大厅”，但不会出现在 URL 牌子上

Remix 的嵌套路由不是装饰，它直接决定：

  • 哪些布局共享
  • 哪些数据分层加载
  • 哪些错误隔离在局部
  • 哪些内容只更新局部泊位