next.js - Nextjs中动态路由的区别

Question

[id].js、[...id].js 和 [[...id]].js 有什么区别 Nextjs 中的动态路由？

Answer 1

案例: posts/[id].js

当您调用/posts/1099 时 - 您的页面将被触发(id 变量的值为 1099。

示例:

/posts - 系统将触发错误(id 未定义)或可能出现问题，具体取决于您的代码。

/posts/1099 - 好的

/posts/1011/info - 系统将触发404。

案例:posts/[...id].js

当您调用/posts/1099 时，您的页面将被触发(id 变量的值为 1099。如果您调用/posts/1011/info - 系统将运行您的代码，不会出现错误。(通过添加三个点来捕获所有路径)，更多信息见 nextjs documentation.

/posts - 系统将触发错误(id 未定义)或可能出现问题，具体取决于您的代码。

/posts/1099 - 好的

/posts/1011/info - 好的(对于所有“嵌套路由”，例如 posts/a/b/c/d/e 等)。

案例:posts/[[...id]].js

与 [...id].js 相同，但包含根路径。 (nextjs documentation)

/posts - 好的。

/posts/1099 - 好的

/posts/1011/info - 好的。