routes - 无限数量的嵌套动态路由 Next.js

Question

我在 Next.js 中遇到了一个问题，我需要导航到具有任意数量的动态嵌套路由的 URL 并获取每个路由的值。例如，我应该能够导航www.mysite.com/color/black/fit/slim/size/medium并获取所有路由的值，例如一个数组，例如：

[ "color", "black", "fit", "slim", "size", "medium" ]

这可以在 Next.js 中完成getServerSideProps吗？

谢谢

Answer 1

是的！您可以拥有任意数量的动态路由。这是关于它的文档。

如果您使用这种页面名称格式（[...slug]），您可以获取参数slug，getServerSideProps它将是url每个部分的字符串数组。

// eg for url www.mysite.com/color/black/fit/slim/size/medium
// and page template located at pages/[...slug].js
export async function getServerSideProps({params}) {
  const slugs = params.slug
  // slugs is an array of strings
  // slugs = [ "color", "black", "fit", "slim", "size", "medium" ]
  return {
    props: {}, // will be passed to the page component as props
  }
}