假设我在Next Js中有这样一个静态生成的页面结构:/[category]/[subCategory]/[slug]其呈现:水果/香蕉/香蕉我希望URL更短,只说:/[slug] -> /bananaPost我在下一个js文档中读到了一些关于重写的内容。
sqserrrh1#
您始终可以使用全部分段。动态段可以通过在方括号[...slug]内添加省略号来扩展以捕获所有后续段。这意味着您的URL可以是以下之一,同时仍然有效:
[...slug]
请注意,当使用catch-all段时,它们总是需要位于段的末尾,这意味着像/[...slug]/[id]这样的东西是不可能的。另一个重要的一点是,你的slug参数将以数组的形式返回给你,这里有一个例子,当访问url /fruit/banana/bananaPost,同时命名文件夹[...slug]:
/[...slug]/[id]
/fruit/banana/bananaPost
interface Props { params: { slug: string[] }; } export default async MyCatchAllPage(props: Props): Promise<JSX.Element> { console.log(props.params) // logs: { slug: ["fruit", "banana", "bananaPost"] } // ... }
字符串
1条答案
按热度按时间sqserrrh1#
您始终可以使用全部分段。动态段可以通过在方括号
[...slug]
内添加省略号来扩展以捕获所有后续段。这意味着您的URL可以是以下之一,同时仍然有效:请注意,当使用catch-all段时,它们总是需要位于段的末尾,这意味着像
/[...slug]/[id]
这样的东西是不可能的。另一个重要的一点是,你的slug参数将以数组的形式返回给你,这里有一个例子,当访问url/fruit/banana/bananaPost
,同时命名文件夹[...slug]
:字符串