APP ROUTER · FILE → URL

从文件树,推导出 URL

勾选目录、选择叶子文件,然后沿着树从 app 往下读。右侧只回答一件事:这棵文件树究竟会不会成为用户能访问的地址?

① 组装文件树

目录按下列顺序嵌套

加入路由结构元素

可以组合多个元素;不合法的组合会在右侧解释原因。

选择树末端的叶子

当前结构 / current tree


            

② 读取路由结果

实时推导

localhost:3000/blog
公开路由
页面可被访问page.tsx 为当前段建立界面
是否形成公开路由
叶子角色
页面 UI
URL 模式
/blog
示例 URL
/blog

params 概念形状

{}

这里展示路由参数的数据形状;实际组件签名请以你使用的 Next.js 版本为准。

哪些目录名不会写进 URL?

  • 目前没有

普通目录 blog 会原样成为路径片段。

推导依据

    一键场景

    先观察正确结构,再故意制造冲突。

    冲突挑战

    这些冲突不能只看单条路径,要比较同级文件或整棵路由树。

    即时判断:先在脑中“删目录”

    每题都只判断陈述是否正确。答完后,用反馈中的那条规则重新走一次文件树。

    判断 01

    app/(marketing)/blog/page.tsx 对应公开地址 /blog

    判断 02

    app/_components/page.tsx 会生成地址 /_components

    判断 03

    app/api/page.tsxapp/api/route.ts 可以在同一段共存。

    判断 04

    app/docs/[[...slug]]/page.tsx 同时可匹配 /docs/docs/a/b