通常你应该有类似isLoading或loading状态的东西，它将显示你的<PageLoader />组件。在useSWR文档中，我看到它是isLoading。所以你只要做：

if(isLoading){
   return <PageLoader />
}

字符串
之后，根据您的请求响应，您可以定义当它获得数据（正确或错误）时应该发生什么。如果它是错的，它应该是例如：

if(!team){
  router.push("/404");
}

型
正确的时候你就显示休息：

return (
   ///
)

型
所以最后它应该看起来像这样：

const { data: team, error, mutate, isLoading } = useSWR('/api/team/' + id, () => 
        axios.get('/api/team/' + id)
            .then(response => response.data.data)
    )

    if (isLoading) {
        return (<PageLoader />)
    }

    if(!team){
      router.push("/404");
    } else {
       return (
        //
       )
    }

型

如果你不想你的网址被改变时，team没有找到，但要显示相同的404页面，那么你可以这样做。
1.创建组件，即ErrorComponent.jsx

export default function ErrorComponent() {
  return (
    <div>
      Im lost 404
    </div>
  )
}

字符串
1.在页面目录中创建一个页面，命名为404.jsx

import ErrorComponent from 'your-error-component-location';

const Error404Page = () => <ErrorComponent />;

export default Error404Page;

型
1.将代码修改为

import ErrorComponent from 'your-error-component-location';

const { data: team, error, isLoading, mutate } = useSWR('/api/team/' + id, () => 
        axios.get('/api/team/' + id).then(response => response.data.data)
    )

    if (!team && isLoading) {
        return (<PageLoader />)
    }
    
    // this is responsible to show your desired 404 component, it might be a 
    // case that your api is returning an error, so worth checking the error too 
    if(!team || !!error) {
        return <ErrorComponent/>
    }

    return (
      // render your team jsx
    );

型

理想情况下，您应该在useEffect内部获取数据。通过使用useEffect和适当的依赖项管理，可以确保在适当的时间获取数据和进行任何相关的清理，从而使React应用程序更具可预测性和效率。

const [done, setDone] = useState(undefined);

        useEffect( () => {axios.get('/api/team/' + id)
        .then(response => response.data.data)
        .then(()=> setDone(true)
    },[])

字符串
使用[ ]确保你只会在挂载时获取一次。
在return（）中，如果没有显示加载页面，则应检查获取是否完成

return(
    <>
    {!done ? (
            <PageLoader/>
          ) : (
            //whatever you wanna show
          )}
    </>
)

型