Next.js嵌套动态路由nested dynamic routing二级路径访问404问题咨询

问题原因 #

你违反了Next.js Pages Router的核心命名规则：同一路由树的不同层级下不允许使用重名的动态路由参数。

你当前两层动态路由都命名为[id]，Next.js路由匹配逻辑会出现参数冲突，无法正确识别第二层嵌套的动态路由，因此访问对应路径时直接返回404，不属于业务代码编写错误，是遗漏了官方路由命名规则导致的。

解决方法 #

把两个层级的动态路由参数改为不同的命名即可，例如外层用[categoryId]、内层用[itemId]，调整后的目录结构如下：

pages/folder1/folder2/[categoryId]/index.js
pages/folder1/folder2/[categoryId]/folder3/[itemId]/index.js

调整后对应路由路径即可正常访问，在页面中通过useRouter获取参数时，分别取router.query.categoryId和router.query.itemId即可拿到对应路径的动态参数。

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