React+Next.js（App Router）创建新页面后无法访问，求解决方案

问题原因 #

你搞错了App Router的路由规则——它不像Pages Router那样直接用xxx.tsx文件名作为路由，而是以目录作为路由路径，每个路由目录下必须放置page.tsx作为页面入口文件。你直接在根目录下创建my-new-page.tsx，Next.js不会把它识别为/my-new-page路由的页面。

解决步骤 #

• 在app目录下创建一个名为my-new-page的文件夹
• 将你写的my-new-page.tsx中的内容，移动到这个新文件夹下的page.tsx文件里（或者直接在该文件夹新建page.tsx并编写页面代码）
• 等待开发服务器热重载（如果没自动生效，重启npm run dev）
• 现在访问http://localhost:3000/my-new-page就能正常打开页面了

关于你的猜想 #

不需要额外配置页面，App Router完全基于文件系统路由，但必须遵循「目录对应路由段，目录内的page.tsx是页面入口」的规则。根目录下的page.tsx对应/路由，是因为它在app这个根路由目录下，符合规则才被识别。

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