node.js - 如何在 Next.js 中利用查询和路由参数？

Question

Next.js 是否有可能与这些路由进行路由匹配？

/items?search=foo

/items/:id

我可以用另一种方式来做，但我必须遵守规范。

标签： node.jsnext.js

Answer 1

是的，Next.js 确实与这些路由匹配。

请记住，Next.js 执行基于文件系统的路由，因此您需要按如下方式构建路由：

 project
 ┣ node_modules
 ┣ pages
 ┃ ┗ items
 ┃   ┗ [id].js
 ┃   ┗ index.js
 ┣ .gitignore
 ┣ package-lock.json
 ┗ package.json

[id].js将匹配/items/:id，您可以通过执行以下操作访问组件中的 id：

const router = useRouter()
const { id } = router.query

index.js将匹配/items?search=foo

您可以通过执行以下操作获取查询参数：

const router = useRouter();
const query = router.query

该query对象看起来像{ search: foo }