首先,如果这有点令人困惑的话,我道歉。因为我也很困惑。
我是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 的空默认值。我的直觉仍然是这不是正确的“下一步”处理方式,但是这个项目是从盖茨比那里移植过来的,有点硬塞进来的,所以我只需要让它工作起来。
1条答案
按热度按时间tzdcorbm1#
使用
pages/listing/[...slug].js
作为文件名,然后从getStaticPaths
返回如下对象:这意味着以下地址正在工作:
然后,您可以从上下文
context.params.slug
访问getStaticProps
中的数组slug。根据访问的页面,它将包含["path1"]
,["path2"]
或["deeper", "path"]
。你可以在下面的沙盒中尝试一下:
https://codesandbox.io/s/confident-microservice-lu2jl?file=/pages/listing/%5B...slug%5D.js