Next js中具有多个参数的动态路由

Question

我正在使用 Next js。我想使用基于 this documentation 的动态路由。如何为 Link 组件设置 href="/page/[p1]/[p2]" 两个参数？我的页面文件的结构应该是什么以及如何使用 router.query?

Answer 1

您可以借助 nextjs 9 中的动态路由来完成此操作。例如，pages/post/[postId]/[commentId].js 将匹配 /post/p1/c1。它的查询对象是：{ postId: 'p1', commentId: 'c1' }。你的 Link 组件应该是这样的：

<Link
   href="/post/[postId]/[commentId]"
   as={`/post/${postId}/${commentId}`}>
      <a>link to comment</a>
</Link>

Answer 2

文件夹结构应该是这样的

Page - Folder 
 blog - Folder Name
 [p1] - Folder Name
   [p2].js - File Name

它会在你像 /blog/postname/id 那样调用 URL 时起作用，它会调用 p2.js 页面

Answer 3

像这样的文件夹结构可以工作

-[blog] //folder name
 -[post].js //file name
-items //folder name
 -[category] //folder name
  -[subCategory].js //file name

您可以简单地调用博客并post喜欢

<a href="/blog/post"></a>

您可以简单地调用类别和子类别，如

<a href="/items/category/subCategory"></a>

Answer 4

其他方法是创建一个 slug [...slug] 并使用 router.query 获取参数。

Dynamic routing with multiple parameters in Next js