0

首先，如果这有点困惑，请道歉。那是因为我也很困惑。
我对 Next.js 很陌生，我正在使用 WP 作为无头 CMS 从 Gatsby 迁移一个站点。我没有建立原始网站，所以我继承了一堆我不熟悉的代码。

我正在使用一个/pages/listing/[slug].js组件来为这个客户生成单独的列表。我通过查询所有 slug 的列表来获取路径getStaticPaths，并使用 slug 查询 db 以获取页面的数据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如果我使用道具（即）手动输入 url listing/product-name-here，页面加载正确，但 url 错误。

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

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

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

4

1 回答 1

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

于 2021-06-28T06:36:26.960 回答