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

Question

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

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

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

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

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

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

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

Answer 1

编辑为第一个答案无效。

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

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

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

listing/path1
listing/path2
listing/deeper/path

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

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

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

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

Next.js catch-all / as routing

javascript

url

routes

catch-all

next.js