Next js中多参数动态路由

Question

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

Answer 1

文件夹结构应该是这样的

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

当你调用像 /blog/postname/id 这样的 URL 时它会工作，它会调用 p2.js 页面

Answer 2

您可以借助 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>