NextJS动态路由：数据不存在时显示404，否则显示加载动画

你的代码问题在于：仅通过!team判断加载状态，但当API返回404时，SWR的error对象会被赋值，而team依然是undefined，导致加载动画持续运行，且未处理404的展示逻辑。以下是修复方案：

修改后的完整代码 #

import useSWR from "swr"
import axios from '@/lib/axios'
import { useRouter } from 'next/router'
import PageLoader from './path-to-your-PageLoader' // 替换为你的加载组件路径
import NotFoundPage from './path-to-your-NotFoundPage' // 替换为你的404组件路径

const ViewTeam = () => {
    const router = useRouter()
    const { id } = router.query

    // 仅当id存在时发起请求，避免无效API调用
    const { data: team, error, mutate } = useSWR(id ? `/api/team/${id}` : null, () => 
        axios.get(`/api/team/${id}`)
            .then(response => response.data.data)
            .catch(err => {
                // 抛出错误让SWR捕获，确保error对象能获取到错误信息
                throw err
            })
    )

    // 1. 路由参数id未就绪时，显示加载
    if (!id) {
        return <PageLoader />
    }

    // 2. 处理API错误：优先判断404场景
    if (error) {
        if (error.response?.status === 404) {
            return <NotFoundPage />
        }
        // 其他错误场景返回通用提示
        return <div>加载团队信息失败，请稍后重试</div>
    }

    // 3. 正常加载中（无错误且数据未返回）
    if (!team) {
        return <PageLoader />
    }

    // 4. 数据加载完成，渲染团队页面
    return (
        <div>
            <h1>{team.name}</h1>
            {/* 其他团队信息渲染内容 */}
        </div>
    )
}

export default ViewTeam

关键改动说明 #

• 条件发起请求：给SWR的请求key加上id ? ... : null，避免在id未就绪时发起无效API请求。
• 错误捕获与处理：显式抛出axios请求的错误，确保SWR能捕获到错误状态；通过error.response?.status判断是否为404，直接渲染404页面。
• 状态判断顺序：按「id未就绪→错误处理→加载中→正常渲染」的顺序判断，确保每种状态都被正确覆盖，不会出现加载动画无限运行的情况。

内容的提问来源于stack exchange，提问作者BigJobbies