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

  道具（即

  listing/product-name-here

  ）手动输入 url，页面加载正确，但 url 错误。

我想知道是否有某种方法可以访问 URL，但到目前为止我唯一遇到的是

useRouter

，因为这是一个钩子，我无法在组件本身之外使用它。

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

编辑 通过将

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
• 列表/更深/路径

然后您可以从上下文

getStaticProps

中访问

context.params.slug

中的数组。这将包含

["path1"]

、

["path2"]

或

["deeper", "path"]

，具体取决于访问的页面。

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

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