React项目中404错误页跳转失效问题求助

问题根源 #

你的代码存在两个核心问题：

1. API错误未被正确捕获：useFetch Hook可能没有处理HTTP 4xx/5xx状态码（比如404），这类错误不会被fetch自动抛出，导致error状态未触发，组件继续执行后续JSX。
2. 未校验数据存在性：当logementId无效时，API返回空数据或undefined，后续访问logement.pictures、logement.title等属性会直接抛出错误，导致组件崩溃，最终显示空白页。

修复步骤 #

1. 先校验数据存在性，避免组件崩溃 #

在返回页面JSX前，先判断logement是否存在，若不存在直接渲染错误页：

function Logement() {
  const { logementId } = useParams();

  const {
    data: logement,
    isLoading,
    error,
  } = useFetch(`http://localhost:8000/logements/${logementId}`);

  if (isLoading) return <h1>LOADING...</h1>;

  // 新增：判断error或logement不存在的情况
  if (error || !logement) {
    return <Error />;
  }

  return (
    // 原页面JSX内容
  );
}

2. 修正useFetch Hook，正确捕获HTTP错误 #

修改useFetch的实现，确保它能识别HTTP状态码错误（比如404）：

import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const response = await fetch(url);
        // 关键：检查响应是否成功
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }
        const result = await response.json();
        setData(result);
        setError(null);
      } catch (err) {
        setError(err);
        setData(null);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, isLoading, error };
}

fetch仅在网络故障时才会触发catch，手动判断response.ok能把HTTP错误（如404）纳入错误处理流程，确保error状态被正确设置。

3. 可选：用重定向替代直接渲染错误页 #

如果希望跳转到独立的错误路由，可使用useNavigate：

import { useParams, useNavigate } from "react-router-dom";

function Logement() {
  const { logementId } = useParams();
  const navigate = useNavigate();

  const {
    data: logement,
    isLoading,
    error,
  } = useFetch(`http://localhost:8000/logements/${logementId}`);

  if (isLoading) return <h1>LOADING...</h1>;

  if (error || !logement) {
    navigate('/error');
    return null; // 重定向期间不渲染任何内容
  }

  return (
    // 原页面JSX内容
  );
}

注意要在路由配置中添加/error对应的路由规则。

验证 #

测试时输入一个不存在的logementId，此时：

• API返回404，useFetch会捕获错误并设置error状态
• 组件会触发错误判断逻辑，渲染错误页或重定向到错误路由
• 不会再出现因访问undefined属性导致的组件崩溃与空白页

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