在Next js中使用多个参数进行动态路由

Question

我正在使用Next js。我想使用基于this documentation的动态路由。如何为链接组件设置两个参数，例如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

你可以简单地调用博客并发帖

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

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

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