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

Question

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

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

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

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

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

如果不清楚，请随时提出任何问题。我将代码 sn-ps 排除在外是因为我觉得我的方法根本上是错误的，而不是我遇到的烦人的错误。

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

Answer 1

编辑为第一个答案不起作用。

使用pages/listing/[...slug].js作为文件名，然后从getStaticPaths返回一个像这样的对象：

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

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

• 列表/路径1
• 列表/路径2
• 列出/深入/路径

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

您可以在下面的沙盒中试用：

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