静态路由触发Next.js中的动态并行路由

Question

我正在使用 Next.js 并有以下路线：

• /@modal/(.)snippets/[id]/page.tsx

  （对于模态）

• /snippets/[id]/page.tsx

  （对于单个片段）

• /snippets/new/page.tsx

  （用于创建新片段）

当我导航到

/snippets/new

时，就会出现问题 — 不是打开新的代码片段创建页面，而是打开

/@modal/(.)snippets/[id]

的模式。

我相信这种情况正在发生，因为 new 可能会被解释为 id，这会导致模式打开。

问题： 如何确保导航到

/snippets/new

打开新的代码片段创建页面，而不触发

/@modal/(.)snippets/[id]

的模式？使用并行路由时，在 Next.js 中处理此问题的最佳方法是什么？

这是我的项目结构：

Answer 1

出现您遇到的问题是因为 Next.js 尝试将 /snippets/new 与 [id] 动态路由进行匹配。发生这种情况是因为像 [id] 这样的动态路由将匹配任何值，包括新值。为了避免这种情况，您需要将 /snippets/new 路由显式定义为优先于动态 [id] 路由的静态路由。以下是如何使用并行路由和 Next.js 路由约定来处理此问题：

1. 确保静态路由优先于动态路由：Next.js 路由的工作方式是更具体的路由优先于动态路由。由于您已经定义了 /snippets/new/page.tsx，因此它应该比 [id] 动态路由具有更高的优先级。
2. 修改路由命名约定：有时，由于嵌套段中的路由命名和并行路由，可能会出现问题。为了确保您的路由正确分离，请考虑重组或仔细检查您的文件结构，如下所示：

在此设置中，显式定义了 new/page.tsx，并且 [id]/page.tsx 仅当路径不是 /snippets/new 时才匹配。