React中点击图片跳转详情页：handleClick实现及数据获取

1. 编写handleClick函数（基于React Router） #

要实现点击图片跳转到详情页，首先需要借助React Router的路由跳转能力，以下是具体实现：

修改后的CustomContent组件代码 #

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; // 引入路由跳转钩子

function CustomContent() {
  const [customContent, setCustomContentResults] = useState([]);
  const navigate = useNavigate(); // 初始化跳转方法

  const fetchData = async() => {
    // 你的API请求逻辑
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleClick = (post) => {
    // 两种跳转方案可选：
    // 方案1：通过URL参数传递图片ID（详情页需根据ID重新请求数据）
    navigate(`/detail/${post.id}`);

    // 方案2：通过路由state传递完整图片数据（无需二次请求，但刷新页面会丢失数据）
    // navigate('/detail', { state: { post } });
  };

  const content = customContent?.map(post => (
    <li key={post.id}>
      <div>
        <img alt={post.name || '图片'} src={post.src.medium} onClick={() => handleClick(post)} />
      </div>
    </li>
  ));

  return (
    <div>
      <ul>{content}</ul>
    </div>
  );
}

export default CustomContent;

2. 在detail.jsx中获取对应数据 #

根据上面的跳转方案，对应两种数据获取方式：

方案1：通过URL参数获取ID并请求详情数据 #

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; // 引入URL参数获取钩子

function Detail() {
  const { id } = useParams(); // 提取URL中的图片ID
  const [post, setPost] = useState(null);

  const fetchPostDetail = async () => {
    // 根据ID请求详情API示例
    const res = await fetch(`你的API地址/${id}`);
    const data = await res.json();
    setPost(data);
  };

  useEffect(() => {
    if (id) fetchPostDetail();
  }, [id]);

  if (!post) return <div>加载中...</div>;

  return (
    <div className="detail-page">
      <h2>{post.name}</h2>
      <p>图片ID：{post.id}</p>
      <img alt={post.name} src={post.src.large || post.src.medium} />
      <p>图片地址：{post.src.medium}</p>
      {/* 按需展示其他属性 */}
    </div>
  );
}

export default Detail;

方案2：通过路由state直接获取完整数据 #

import { useLocation } from 'react-router-dom'; // 引入路由状态获取钩子

function Detail() {
  const location = useLocation();
  const post = location.state?.post;

  if (!post) return <div>无效的图片详情</div>;

  return (
    <div className="detail-page">
      <h2>{post.name}</h2>
      <p>图片ID：{post.id}</p>
      <img alt={post.name} src={post.src.large || post.src.medium} />
      <p>图片地址：{post.src.medium}</p>
      {/* 按需展示其他属性 */}
    </div>
  );
}

export default Detail;

补充：路由配置 #

确保在根组件中配置好对应路由规则：

import { Routes, Route } from 'react-router-dom';
import CustomContent from './CustomContent';
import Detail from './detail';

function App() {
  return (
    <Routes>
      <Route path="/" element={<CustomContent />} />
      <Route path="/detail/:id" element={<Detail />} /> {/* 对应方案1 */}
      {/* <Route path="/detail" element={<Detail />} /> */} {/* 对应方案2 */}
    </Routes>
  );
}

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