Expo Router中实现类似Laravel嵌套资源路由的最佳实践咨询

直接实现Laravel风格的嵌套路由 #

Expo Router完全支持通过文件夹嵌套+动态路由文件夹的方式实现你想要的嵌套结构，具体操作如下：

1. 按目标路由结构创建对应文件夹与文件：

   • 实现 /deck/{deckId}/card/edit/[id].tsx：
     依次创建 deck 文件夹 → 内部建 [deckId] 动态文件夹 → 再建 card 文件夹 → 内部建 edit 文件夹 → 最后放入 [id].tsx
   • 实现 /deck/{deckId}/card/add/index.tsx：
     在上述 card 文件夹下创建 add 文件夹 → 放入 index.tsx

2. 在组件中获取路由参数：
   使用 useLocalSearchParams() 即可同时获取嵌套的路由参数：

   import { useLocalSearchParams } from 'expo-router';
   
   export default function EditCard() {
     const { deckId, id } = useLocalSearchParams<{ deckId: string; id: string }>();
     // 基于参数处理业务逻辑
     return <div>编辑卡片ID：{id}，所属卡组ID：{deckId}</div>;
   }
   

替代方案的局限性 #

你提出的 /card/edit/[id].tsx（附带deckId参数）方案虽然可行，但存在明显不足：

• 路由语义模糊：从路径无法直观体现Card与Deck的从属关系，不利于团队协作和路由维护
• 代码组织分散：关联业务的路由分散在不同根目录下，模块划分不清晰
• 参数约束弱：嵌套路由方式强制要求传入deckId，能避免业务逻辑中因参数缺失引发的错误

最佳实践总结 #

• 优先选择嵌套动态路由结构，完全匹配Laravel嵌套资源路由的设计思路，既保证路由语义清晰，又便于按业务模块组织代码
• 动态路由文件夹直接用 [paramName] 命名即可，Expo Router会自动识别为路由参数
• 新增卡片的路由可简化为 /deck/[deckId]/card/add.tsx（无需嵌套index.tsx，直接在add.tsx中实现），路径更简洁且不影响功能

内容的提问来源于stack exchange，提问作者tamke001