Question

我阅读了动态路由的文档，但他们没有过多解释动态路由如何与“catching all routes”配合使用。

我这条路线的文件夹结构是：

└──pages
   └──catalog
      └──[[...slug]].js

这是我的代码：

export default function Catalog(props) {
    return (
        <Product product={props.product} />
    )
}

export async function getStaticProps({ params }) {
    const productSlug = params.slug[params.slug.length-1];
    const data = await getSingleProduct(productSlug)

    return {
        props: {
            product: data.product, 
        },
        revalidate: 30
    }
}

我的 API 是 WP，我有这样的产品页面 URI /catalog/category/sub-category/product/

因此，如果我转到 URL /catalog/category/sub-category/product/，它可以与我在下面共享的代码一起正常工作，因为我有 const productSlug = params.slug[params.slug.length-1];，它将获取我的 slug，我可以将其传递给 API 并仅使用产品数据很好。

但我也想处理类别，因此如果我转到 /catalog/category/sub-category/，它应该加载类别页面，如果我转到 /catalog/category/，它应该加载该类别页面。

即使这也适用于我拥有的代码，因为我正在获取 params 数组的最后一个元素，即产品段塞，但情况并非总是如此。有时，产品没有任何子类别，因此 URI 将是 /catalog/category/product，这意味着我无法将其固定到数组的第三个元素并将其他两个用作类别 slug。

params 给了我一个没有任何键或任何东西的数组，我似乎无法弄清楚如何在 next.js 中实现这一点

感谢任何帮助！

Next.js：用于捕获所有路由的动态路由的 getStaticPaths [[...slug]].js

0 个答案: