这里有两种情况。一个工作,另一个没有。
我在Next.js 12中的pages
目录中添加了一个404.js
页面。
如果我转到一个没有定义路由的URL,例如domain.tld/non-existing-route
,那么我会得到404 HTTP状态码,并且会显示我的自定义未找到页面。
然而,如果我转到一个有参数的路由,例如domain.tld/post/slug
,并提供一个不存在的slug,我仍然会得到我的自定义404页面,但这次是HTTP状态码200。
在我的post/[slug].js
页面中,这是我的getServerSideProps
:
const getServerSideProps = async (context) => {
const { slug } = context.params || {}
var url = `/post/data?slug=${slug}`
const data = await apiClient(url)
return {
props: {
...data,
}
}
}
当slug
不存在时,我们的API返回404和以下JSON:
{
"type": 404,
"message": "Not found"
}
这将由我们的apiClient
代码处理,这个JSON将返回给getServerSideProps
:
{
statusCode: 404,
message: 'Item does not exist'
}
然后在我们的/post/[slug].js
文件中,我们有这个JSX:
import NotFound from '../../404'
const Post = ({
post,
seoParameters,
statusCode,
}) => {
return <>
{
statusCode === 404
?
<NotFound />
:
<Layout />
}
</>
}
会有什么问题呢?
1条答案
按热度按时间3ks5zfa01#
在Next.js pages目录中,在
getServerSideProps
函数中返回notFound,告诉Next.js它不是一个有效的路由。不需要向页面发送额外的 prop ,因此您可以删除状态码检查,并仅返回页面上的
Layout
。