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

Question

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

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

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

谢谢

Answer 1

是的！您可以拥有任意数量的动态路由。 Here's the documentation on it.

如果你使用这种页面名称格式（[...slug]），你可以在getServerSideProps中得到参数slug，它将是[的每个部分的字符串数组=19=].

// 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
  }
}

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

Infinite number of nested dynamic routes Next.js

routes

next.js

dynamic-routing