App Router · 路由实验台

从文件树推导 URL 与组件树

切换目录与特殊文件,观察同一份文件结构如何变成浏览器地址和 React 嵌套关系。

Next.js 16 语义

实际文件树

缩进表示文件系统层级,括号目录只参与组织。

    框架推导结果

    先看路由是否成立,再按约定把组件从外向内排列。

    公开 URL /projects/atlas
    浏览器可访问 是 · page.tsx 已存在
    (workspace) 不写入地址;projects 与动态 slug 共同组成 URL。
    params:传入形状与解析结果
    params: Promise<{ slug: string }> await params → { slug: "atlas" }
    组件嵌套 · 外 → 内

      一分钟判断

      选中答案后立即解释,不需要提交。

      哪种结构会公开 /projects/atlas,并在 await params 后得到 { slug: "atlas" }

      请选择文件结构
      先判断哪些目录进入 URL,再确认叶子路由有没有 page.tsx

      规则依据: Layouts and PagesProject StructureDynamic Segments