问题描述
// /pages/articles/[slug].js
import React from 'react'
import { useRouter } from 'next/router'
import ErrorPage from 'next/error'
const Article = (props) => {
const router = useRouter()
if (router.isFallback) {
return <div>Loading..</div>
}
if (!props['data']) {
return <ErrorPage statusCode={404} />
}
return (
<div>
Article content
</div>
)
}
export default Article
export const getStaticProps = async(context) => {
const slug = context.params.slug
const res = ["a","b","c"].includes(slug)
? {
props: {
data: slug
}
}
: {
props: {},notFound: true
}
return res
}
export const getStaticPaths = async () => {
return {
paths: [
{ params: { slug: "a" }},{ params: { slug: "b" }},{ params: { slug: "c" }}
],fallback: true
}
}
当浏览器导航到一个不存在的页面(例如 http://localhost:3000/articles/d)时,它会按预期返回默认的 nextjs 404 页面。
但浏览器网络选项卡显示主文档(404 错误页面)的状态 200。网络选项卡中状态为 404 的唯一内容是 d.json 和 404.js。
我认为主文档也应该有 404 状态。 getStaticProps 文档说明了返回值:
但在这种情况下,页面状态是 200 而不是 404。是否还需要执行其他操作才能返回状态 404?
如果没有回退,状态为 404。
解决方法
对于此特定用例,您必须改用 fallback: 'blocking'
。
export const getStaticPaths = async () => {
return {
paths: [
{ params: { slug: "a" }},{ params: { slug: "b" }},{ params: { slug: "c" }}
],fallback: 'blocking'
}
}
与 fallback: true
不同,如果页面尚未生成,它将不提供“后备”版本(我想这就是为什么您总是获得 200
状态代码)。
相反,fallback: 'blocking'
将在呈现页面之前等待 HTML 生成 - 类似于 SSR 期间发生的情况。这意味着如果从 notFound: true
返回 getStaticProps
,您将获得页面请求的正确 404
状态代码。