[英]Next.js catch-all / as routing
First of all, apologies if this is a bit confused.首先,如果这有点混乱,请道歉。 That's because I am also confused.
那是因为我也很困惑。
I'm pretty new to Next.js and I'm migrating a site over from Gatsby using WP as a headless CMS.我对 Next.js 很陌生,我正在使用 WP 作为无头 CMS 从 Gatsby 迁移一个站点。 I didn't build the original site so I'm inheriting a load of code I'm not familiar with.
我没有建立原始网站,所以我继承了大量我不熟悉的代码。
I'm using a /pages/listing/[slug].js
component to generate individual listings for this client.我正在使用
/pages/listing/[slug].js
组件为该客户端生成单独的列表。 I am fetching paths by querying all the slugs for their listings in getStaticPaths
, and using the slug to query the db to get data for the page using getStaticProps
.我通过在
getStaticPaths
查询所有 slug 的列表来获取路径,并使用 slug 查询数据库以使用getStaticProps
获取页面的数据。 All good so far.到目前为止一切都很好。 Only issue right now is I've been told the client wants to retain their urls as they currently are - eg
listing/experience/location/product-name-here
(where product-name-here
is the slug I fetched from the CMS), but I have only figured out how to do listing/product-name-here
.现在唯一的问题是我被告知客户想要保留他们目前的网址 - 例如
listing/experience/location/product-name-here
(其中product-name-here
是我从 CMS 获取的 slug) ,但我只知道如何在listing/product-name-here
进行listing/product-name-here
。
My failed approaches so far have been to:到目前为止,我失败的方法是:
[...slug].js
, but I am getting moaned at for the slug not being an array.[...slug].js
,但我因 slug 不是数组而抱怨。 Even if I change it into an array manually when I am fetching the static paths, because only the slug is being fetched, I am still not using the correct url.as
prop on the Link
component.Link
组件上使用as
道具。 It sends me to the link that I want now, but I get a 500 error.href
prop (ie. listing/product-name-here
), the page loads correctly, but with the wrong url.href
属性手动输入网址(即listing/product-name-here
),页面将正确加载,但网址错误。 I have wondered if there is some way to access the URL, but the only thing I have come across is so far is useRouter
and since that's a hook I am unable to use it outside of the component itself.我想知道是否有某种方法可以访问 URL,但到目前为止我遇到的唯一事情是
useRouter
,因为这是一个钩子,我无法在组件本身之外使用它。
Feel free to ask any questions if this is unclear.如果不清楚,请随时提出任何问题。 I have left code snippets out because I feel like my approach is fundamentally wrong rather than this being an annoying error I am getting.
我省略了代码片段,因为我觉得我的方法从根本上是错误的,而不是我遇到的令人讨厌的错误。
Edit The problem was eventually solved by having fallback
set to true
, and setting a hell of a lot of optional chaining for anything handling API related data - as well as empty defaults on all props.编辑该问题最终通过将
fallback
设置为true
并为处理 API 相关数据的任何内容设置大量可选链接以及所有道具的空默认值来解决。 My gut feeling is still that this is not the correct 'Next' way to handle this, but the project was migrated over from Gatsby and kind of shoehorned in so I just needed to get it working.我的直觉仍然是这不是处理这个问题的正确“下一步”方式,但该项目是从 Gatsby 迁移过来的,并且有点硬,所以我只需要让它工作。
Edited as the first answer was not working.编辑为第一个答案不起作用。
Use pages/listing/[...slug].js
as filename, and then return from the getStaticPaths
an object like this:使用
pages/listing/[...slug].js
作为文件名,然后从getStaticPaths
返回一个像这样的对象:
return {
paths: [
{ params: { slug: ["path1"] } },
{ params: { slug: ["path2"] } },
{ params: { slug: ["deeper", "path"] } }
],
fallback: false
};
This means that following addresses are working:这意味着以下地址正在工作:
Then you can access the slug as an array in getStaticProps
from the context context.params.slug
.然后,您可以从上下文
context.params.slug
中的getStaticProps
中将 slug 作为数组访问。 That would contain ["path1"]
, ["path2"]
or ["deeper", "path"]
depending on the page visited.这将包含
["path1"]
、 ["path2"]
或["deeper", "path"]
取决于访问的页面。
You can try it out in the sandbox below:您可以在下面的沙箱中试用:
https://codesandbox.io/s/confident-microservice-lu2jl?file=/pages/listing/%5B...slug%5D.js https://codesandbox.io/s/confident-microservice-lu2jl?file=/pages/listing/%5B...slug%5D.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.