Next.js 路由符号完全指南：掌握 App Router 的强大文件路由系统

Next.js 的 App Router 带来了灵活且强大的文件路由系统，其中各种括号符号的使用就像不同的收纳工具，让项目结构既清晰又高效。本文将通过专业解释和形象比喻，助你快速掌握它们的用法和适用场景。

1. () 路径分组（Group Segments）

专业说明：
() 用于对页面文件进行分组，仅作为项目结构的组织工具，不会影响最终生成的网址路径。

形象比喻：
就像抽屉里的隔板，帮你把物品归类整理，但外人看不到这些分区。

典型场景：
将后台管理页面放入 (admin) 文件夹，实际访问路径依然是 /user、/settings 等，(admin) 不会出现在 URL 中。

app/
  (admin)/
    user/page.tsx       // 实际路径 /user
    settings/page.tsx   // 实际路径 /settings

2. [] 动态路由参数（Dynamic Segments）

专业说明：
[] 用于定义单层动态参数，能够根据路径的不同部分渲染不同内容。

形象比喻：
像是带标签的抽屉，每个标签内容都不同，访问哪个标签就能拿到对应内容。

典型场景：
用户详情页：user/[id]/page.tsx，访问 /user/123 时，id 为 123。

app/
  user/
    [id]/page.tsx      // 匹配 /user/123、/user/abc

3. [...param] 多层动态参数（Catch-all Segments）

专业说明：
[...param] 匹配多层路径参数，适用于不确定路径深度的情况。

形象比喻：
像可拉伸的抽屉，可以装下多层内容，无论路径多深都能一网打尽。

典型场景：
博客多级分类页面：blog/[...slug]/page.tsx，可匹配 /blog/a/b/c 等多级路径。

app/
  blog/
    [...slug]/page.tsx   // 匹配 /blog/a、/blog/a/b、/blog/a/b/c

4. [[...param]] 可选多层动态参数（Optional Catch-all Segments）

专业说明：
[[...param]] 可匹配 0 个或多个路径片段，参数可选。

形象比喻：
像可拆卸的收纳盒，空着也行，装满也行，灵活收纳各种情况。

典型场景：
文档页：docs/[[...slug]]/page.tsx，既可访问 /docs，也可访问 /docs/a/b。

app/
  docs/
    [[...slug]]/page.tsx   // 匹配 /docs、/docs/a、/docs/a/b

5. page.tsx 页面入口

专业说明：
每个路由段下的 page.tsx 是页面的实际入口，决定用户访问时渲染哪个页面。

形象比喻：
就像门牌号，指引用户准确找到每个房间。

总结对比表

实际应用建议

最佳实践

1. 合理使用路径分组：将相关功能页面放在同一个分组内，便于维护
2. 动态路由命名规范：使用语义化的参数名，如 [userId] 而不是 [id]
3. 避免过度嵌套：保持路由结构简洁，避免过深的嵌套层级

常见陷阱

• 忘记添加 page.tsx 文件导致 404 错误
• 混淆 [...param] 和 [[...param]] 的使用场景
• 路径分组命名与实际路由冲突

通过合理运用这些"收纳工具"，你的 Next.js 项目结构将更加清晰，维护和扩展也会事半功倍。如果你有更复杂的路由需求或想看实际代码示例，欢迎留言交流！