Reactjs 下一个js中的多参数动态路由

我正在使用nextjs。我想使用基于的动态路由。如何为链接组件设置href=“/page/[p1]/[p2]”等两个参数？我的页面文件的结构应该是什么，以及如何使用router.query？

您可以借助nextjs 9中的动态路由来实现这一点。 例如，

pages/post/[postId]/[commentId].js

将匹配

/post/p1/c1

。它的查询对象将是：{postId:'p1'，commentId:'c1'}。 您的链接组件应如下所示：

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

链接到评论

文件夹结构应该是这样的

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

---

当您调用URL（如/blog/postname/id）时，它将起作用。它将调用p2.js页面

-[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>

到目前为止您尝试了什么？我使用了一个通配符和一个查询字符串，如page/[p1]？p2=，但我想用2个通配符。我的页面名[p1][p2]也使用此结构。TSX请检查此谢谢，这是一个很好的示例执行此操作时，

页面

目录中的文件结构是什么样子？@P4nd4b0b3r1n0 pages/post/[postId]/[commentId]。js您需要一个名为第一个参数：[postId]的文件夹和名为第二个参数的js文件：[commentId].jsI想知道如果我想同时处理顶层和底层页面，我是否应该同时使用

[postId]

文件夹和

[postId].js

文件，事实上，它的工作原理是这样的，您也可以通过const{query:{p1，p2}，}=req；console.log（“p1=“+p1”）；console.log从[p2.js]文件中获取详细信息(“P2=”+P2）；