React实现Div点击跳转详情页：Card组件技术求助

步骤1：安装 React Router #

首先确保项目中已安装 react-router-dom：

npm install react-router-dom
# 或
yarn add react-router-dom

步骤2：配置路由结构 #

在根组件（如 App.tsx）中设置路由，定义列表页和详情页的路由规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import CardList from './CardList'; // 你的卡片列表组件
import MissionDetail from './MissionDetail'; // 新建的详情页组件

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<CardList />} />
        {/* 用 flight_number 作为详情页的唯一标识参数 */}
        <Route path="/mission/:flightNumber" element={<MissionDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

步骤3：修改 Card 组件实现点击跳转 #

有两种常用实现方式：

方式一：用 Link 组件包裹卡片（推荐）

直接用 Link 包裹整个卡片，点击卡片任意区域都会触发跳转：

import { Link } from 'react-router-dom';

const Card: React.FC = ({ info }: any) => {
  return (
    <Link to={`/mission/${info.flight_number}`} style={{ textDecoration: 'none', color: 'inherit' }}>
      <div className='card stacked featured'>
        <img src={info.links.mission_patch} className='card_image' alt='NO-IMAGE' />
        <div className='card_content'>
          <h2 className="card_title">{info.mission_name}</h2>
          <p className='card_number'>Flight: {info.flight_number}</p>
          <p className='card_description'>{info.details}</p>
        </div>
      </div>
    </Link>
  );
};

export default Card;

注：添加 style={{ textDecoration: 'none', color: 'inherit' }} 是为了移除 Link 默认的下划线和文字颜色变化，保持卡片原有样式。

方式二：用 useNavigate 钩子实现编程式跳转

如果需要在点击时执行额外逻辑（如数据校验、日志记录），可以用 useNavigate：

import { useNavigate } from 'react-router-dom';

const Card: React.FC = ({ info }: any) => {
  const navigate = useNavigate();

  const handleCardClick = () => {
    // 这里可添加点击前的自定义逻辑
    navigate(`/mission/${info.flight_number}`);
  };

  return (
    <div 
      className='card stacked featured' 
      onClick={handleCardClick}
      style={{ cursor: 'pointer' }} // 添加上手型光标提示可点击
    >
      <img src={info.links.mission_patch} className='card_image' alt='NO-IMAGE' />
      <div className='card_content'>
        <h2 className="card_title">{info.mission_name}</h2>
        <p className='card_number'>Flight: {info.flight_number}</p>
        <p className='card_description'>{info.details}</p>
      </div>
    </div>
  );
};

export default Card;

步骤4：创建详情页组件 MissionDetail #

在详情页中，通过 useParams 获取 URL 参数，再根据参数请求对应任务的详细数据：

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

const MissionDetail: React.FC = () => {
  const { flightNumber } = useParams<{ flightNumber: string }>();
  const [mission, setMission] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 调用你的 API 获取对应 flightNumber 的任务数据
    fetch(`https://api.spacexdata.com/v3/launches/${flightNumber}`)
      .then(res => res.json())
      .then(data => {
        setMission(data);
        setLoading(false);
      })
      .catch(err => console.error(err));
  }, [flightNumber]);

  if (loading) return <div>Loading...</div>;
  if (!mission) return <div>Mission not found</div>;

  return (
    <div className='mission-detail'>
      <h1>{mission.mission_name}</h1>
      <img src={mission.links.mission_patch} alt={mission.mission_name} />
      <p>Flight Number: {mission.flight_number}</p>
      <p>Details: {mission.details}</p>
      {/* 可添加更多任务详细信息 */}
    </div>
  );
};

export default MissionDetail;

关键说明 #

• 选用 flight_number 作为路由参数是因为它是任务的唯一标识，能精准定位单个任务；若你的 API 支持其他唯一ID（如 mission_id），也可替换使用。
• 确保路由路径与跳转路径完全匹配，避免出现404错误。

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