React中useParams获取ID失败致旅游详情页空白问题排查

以下是针对问题的具体排查步骤和解决方案：

1. 确认路由配置正确性 #

首先检查路由定义，确保路径包含:id参数，且组件挂载符合React Router v6规范：

// 示例路由配置（React Router v6）
import { Routes, Route } from 'react-router-dom';
import TourDetails from './TourDetails';

function App() {
  return (
    <Routes>
      {/* 参数名需和后续useParams解构的名称完全一致 */}
      <Route path="/tour/:id" element={<TourDetails />} />
    </Routes>
  );
}

若使用React Router v5，需调整为component或render属性的写法。

2. 验证跳转触发逻辑 #

检查TourCard组件的跳转代码，确保传递了有效ID：

• 使用Link组件跳转（推荐）：

  import { Link } from 'react-router-dom';
  
  function TourCard({ tour }) {
    // 可通过console.log(tour.id)确认ID是否存在且有效
    return (
      <div className="tour-card">
        <h3>{tour.name}</h3>
        <Link to={`/tour/${tour.id}`}>查看详情</Link>
      </div>
    );
  }
  

• 使用useNavigate跳转：

  import { useNavigate } from 'react-router-dom';
  
  function TourCard({ tour }) {
    const navigate = useNavigate();
    const handleClick = () => {
      navigate(`/tour/${tour.id}`);
    };
    return (
      <div className="tour-card" onClick={handleClick}>
        <h3>{tour.name}</h3>
      </div>
    );
  }
  

3. 正确读取useParams参数 #

在TourDetails组件中，确保正确导入并使用useParams，且参数名与路由配置一致：

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function TourDetails() {
  // 解构的id必须和路由中的:id完全匹配，若路由是:tourId则写const { tourId } = useParams()
  const { id } = useParams();
  const [tour, setTour] = useState(null);
  const [loading, setLoading] = useState(true);

  // 先打印ID确认是否获取到
  console.log('当前获取的ID:', id);

  useEffect(() => {
    const fetchTourDetails = async () => {
      try {
        const response = await fetch(`/api/tours/${id}`);
        const data = await response.json();
        setTour(data);
      } catch (error) {
        console.error('获取详情失败:', error);
      } finally {
        setLoading(false);
      }
    };

    // 仅当ID存在时发起请求
    if (id) fetchTourDetails();
  }, [id]);

  // 处理加载和无数据状态，避免页面空白
  if (loading) return <div>加载中...</div>;
  if (!tour) return <div>未找到对应的旅游项目</div>;

  // 渲染详情内容
  return (
    <div className="tour-details">
      <h1>{tour.name}</h1>
      <p>{tour.description}</p>
      <img src={tour.imageUrl} alt={tour.name} />
    </div>
  );
}

export default TourDetails;

4. 其他排查点 #

• 检查接口返回：在浏览器开发者工具Network标签中查看请求是否成功，返回数据是否符合预期。
• 排查样式问题：确认没有display: none、opacity: 0等CSS规则导致内容不可见。
• 匹配Router版本：useParams在v5和v6中用法一致，但路由配置差异较大，确保项目版本与代码匹配。

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