- 最小生殖部位:https://nextjs-paths-issue.vercel.app/
- 最小重现代码:https://github.com/saadq/nextjs-encoding-issue
- Home page
- Food page
我尝试迭代一个food对象数组,并根据每个food对象的标题为每个food对象创建静态页面,这对大多数food都有效,但如果food标题包含/
,则导航到该页面(如the "Nice strawberry/kiwis dessert" page)将抛出404。
在主页中,我在创建Link
时对URL进行了编码,然后在getStaticPaths
函数中,我使用相同的编码链接创建了paths
。
当运行npm run dev
时,页面确实在本地工作,但在实际的输出构建中似乎存在问题。
主页
const HomePage: NextPage = () => (
<>
<h1>Home</h1>
<ul>
{foods.map((food) => (
<li key={food.title}>
<Link href={`/food/${encodeURIComponent(food.title)}`}>
{food.title}
</Link>
</li>
))}
</ul>
</>
)
食物页面
export const getStaticProps: GetStaticProps<Props, Params> = (ctx) => {
const title = ctx.params?.foodTitle as string
const food = foods.find((food) => food.title === title) as Food
return {
props: {
food
}
}
}
export const getStaticPaths: GetStaticPaths = () => {
const paths = foods.map((food) => `/food/${encodeURIComponent(food.title)}`)
return {
paths,
fallback: false
}
}
const FoodPage: NextPage<Props> = ({ food }) => {
return (
<>
<Link href='/'>Go Back</Link>
<h1>{food.title}</h1>
<h2>Amount: {food.amount}</h2>
</>
)
}
export default FoodPage
3条答案
按热度按时间w9apscun1#
我在这里发布的例子有点做作,对于我的实际应用程序来说,我可以通过使用
fallback: 'blocking'
来让它工作。不幸的是,它不再是一个完全可导出的静态网站了,但我只有几个页面会遇到这个问题,所以其中一些页面从服务器加载时会有一点时间。https://nextjs.org/docs/basic-features/data-fetching
//我们将在构建时仅预呈现这些路径。// { fallback:如果路径不存在,blocking }将按需服务器呈现页面//。return { paths,fallback:“阻塞”}
px9o7tmv2#
因为路径中有
/
。%2F
符号表示/
只需为
path
编码定制函数并使用它另外(关于链接):您需要在
Link
中包含<a>
标记另外(关于回退):
回退不会更改URL的逻辑。使用回退将在"第一次请求"时生成静态页-与URL不起作用无关。由于未创建静态页,因此在部署期间未出现错误(回退为false)
您需要:* "我正在尝试遍历一个食物对象数组,并根据每个食物对象的标题为每个食物对象创建静态页面。"*=您需要在数据库中添加一个名为"URL"或类似的字段,并根据URL *(您之前在创建数组时生成)而不是名称来迭代元素,因为:
1.你需要有一个"唯一的" URL(通过[pid]参数或其他方式从你的api中获取数据)
1.您需要在URL中使用avoid reserved and forbidden符号
1.最好美化网址。(我和你分享了一个函数)
也许我没有正确理解你的问题
qxsslcnc3#
一个老线索,但我花了很多时间寻找一个解决方案,所以我想分享。
为了在getStaticPath中获取格式为/categories/page的链接,同时在/category/和/category/page/中使用相同的组件,但使用不同的参数,您应该使用页面格式[... category]. js。这允许您在getStaticPath中以数组形式传递参数:
结果,它将生成页面类别/页面,并仍然有回退:false。尝试将“/”直接添加到路径(如您所做的那样)将创建html页面category%2fpage.html。
More details about static paths以及关于捕获所有路线