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

Posted

技术标签:

【中文标题】Next js中具有多个参数的动态路由【英文标题】:Dynamic routing with multiple parameters in Next js 【发布时间】:2020-01-24 07:29:38 【问题描述】:

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

【问题讨论】:

到目前为止你有什么尝试? 我使用了通配符和查询字符串,例如 page/[p1]?p2=... ,但我想使用 2 个通配符。也使用这个结构作为我的页面名称 [p1][p2].tsx 查看github.com/zeit/next.js/tree/canary/examples/dynamic-routing 谢谢,这是一个很好的例子 【参考方案1】:

文件夹结构应该是这样的

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

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

【讨论】:

您也可以通过 const query: p1, p2 , = req; 将详细信息返回到您的 [p2.js] 文件中。控制台.log("P1="+p1); console.log("P2="+p2);【参考方案2】:

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

【讨论】:

执行此操作时,pages 目录中的文件结构会是什么样子? @P4nd4b0b3r1n0 pages/post/[postId]/[commentId].js 你需要一个名称为第一个参数的文件夹:[postId] 和一个名称为第二个的 js 文件:[commentId ].js 我想知道如果我想同时处理顶层和底层页面,是否应该同时使用[postId] 文件夹和[postId].js 文件,确实它是这样工作的【参考方案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>

【讨论】:

以上是关于Next js中具有多个参数的动态路由的主要内容,如果未能解决你的问题,请参考以下文章

如何基于 GraphQL API 的 slug 使用 Next.js 进行动态路由?

Next.js:我们如何将动态路由重定向到静态页面?

如何处理调用 API 的 Next.js 中动态路由的未找到 404?

Next.js - 带有动态路由的浅路由

如何让 Next JS 动态路由与 RelayJS 一起使用

Next.js 用于静态导出的动态页面参数