Next.js 包罗万象 / 作为路由

Question

首先，如果这有点令人困惑，我们深表歉意。那是因为我也很困惑。
我对 Next.js 还很陌生，我正在使用 WP 作为无头 CMS 从 Gatsby 迁移一个网站。我没有构建原始站点，因此我继承了一些我不熟悉的代码。

我正在使用一个/pages/listing/[slug].js组件为该客户生成单独的列表。我通过查询所有 slug 中的列表来获取路径getStaticPaths，并使用 slug 查询数据库以获取页面的数据getStaticProps。到目前为止一切都很好。现在唯一的问题是我被告知客户希望保留他们当前的网址 - 例如listing/experience/location/product-name-here（product-name-here我从 CMS 获取的 slug 在哪里），但我只知道如何做listing/product-name-here。

到目前为止，我失败的方法是：

• 将组件更改为[...slug].js，但我因 slug 不是数组而抱怨。即使我在获取静态路径时手动将其更改为数组，因为只获取了 slug，我仍然没有使用正确的 url。
• 使用组件as上的道具Link。它会将我发送到我现在想要的链接，但我收到 500 错误。href如果我使用prop（即）手动输入 url listing/product-name-here，页面会正确加载，但 url 错误。

我想知道是否有某种方法可以访问该 URL，但到目前为止我遇到的唯一一件事是，useRouter因为这是一个钩子，所以我无法在组件本身之外使用它。

如果不清楚，请随时提出任何问题。我留下了代码片段，因为我觉得我的方法从根本上是错误的，而不是我遇到的一个恼人的错误。

编辑 这个问题最终通过fallback设置为true并为处理 API 相关数据的任何内容设置大量可选链接以及所有道具上的空默认值而得到解决。我的直觉仍然是，这不是处理这个问题的正确“下一个”方式，但该项目是从盖茨比迁移过来的，并且有点硬塞进去，所以我只需要让它工作。

Answer 1

用作pages/listing/[...slug].js文件名，然后从getStaticPaths对象返回，如下所示：

  return {
    paths: [
      { params: { slug: ["path1"] } },
      { params: { slug: ["path2"] } },
      { params: { slug: ["deeper", "path"] } }
    ],
    fallback: false
  };

这意味着以下地址正在工作：

• 列表/路径1
• 列表/路径2
• 列表/更深/路径

getStaticProps然后您可以从 context中以数组形式访问 slug context.params.slug。这将包含["path1"],["path2"]或 ，["deeper", "path"]具体取决于访问的页面。

您可以在下面的沙箱中尝试一下：

https://codesandbox.io/s/confident-microservice-lu2jl?file=/pages/listing/%5B...slug%5D.js