Next.js catch-all / as routing

yk9xbfzb  于 2023-03-22  发布在  其他
关注(0)|答案(1)|浏览(107)

首先,如果这有点令人困惑的话,我道歉。因为我也很困惑。
我是Next.js的新手,我正在使用WP作为无头CMS从Gatsby迁移一个网站。我没有建立原始网站,所以我继承了一堆我不熟悉的代码。
我使用/pages/listing/[slug].js组件为这个客户端生成单独的列表。我通过查询getStaticPaths中所有slug的列表来获取路径,使用slug查询数据库,使用getStaticProps获取页面数据。目前为止一切正常。现在唯一的问题是,我被告知客户端希望保留当前的URL-例如listing/experience/location/product-name-here(其中product-name-here是我从CMS中获取的slug),但我只想出了如何做listing/product-name-here
到目前为止,我失败的方法是:

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

我想知道是否有某种方法可以访问URL,但到目前为止我遇到的唯一方法是useRouter,因为这是一个钩子,我无法在组件本身之外使用它。
如果不清楚的话,请随意提问。我之所以留下代码片段,是因为我觉得我的方法从根本上是错误的,而不是我得到的一个烦人的错误。

编辑这个问题最终通过将fallback设置为true来解决,并为处理API相关数据的任何内容设置了大量可选链接-以及所有 prop 的空默认值。我的直觉仍然是这不是正确的“下一步”处理方式,但是这个项目是从盖茨比那里移植过来的,有点硬塞进来的,所以我只需要让它工作起来。

tzdcorbm

tzdcorbm1#

使用pages/listing/[...slug].js作为文件名,然后从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

相关问题