React应用：已实现数据列表，求指导点击跳转详情页方案

我需要完成React应用的第二部分功能：点击已展示的猫咪品种列表项时，触发获取该品种的更多详情并在单独页面展示。目前已完成从TheCatApi获取数据并展示列表的部分，代码如下：

import React from "react";
import './App.css';

class App extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        items: [],
        DataisLoaded: false
    };
}

componentDidMount() {
    fetch("https://api.thecatapi.com/v1/breeds")
        .then((res) => res.json())
        .then((json) => {
            this.setState({
                items: json,
                DataisLoaded: true
            });
        })
}
render() {
    
    const { DataisLoaded, items } = this.state;
    if (!DataisLoaded) return <div>
        <h1>请稍等...</h1> </div> ;

    return (
    
    <div className = "App">
            <h1> 从TheCatApi获取数据 </h1>  {
            items.map((item) => (
        
            <ul> 
                <li>
                    { item.name }
                                      
                
                    
                </li>
                

              
              

            </ul>
            ))
        }
    </div>
);
}
}
export default App;

要实现点击跳转详情页并加载详情的功能，按以下步骤操作：

1. 安装React路由 #

首先安装react-router-dom用于页面路由：

npm install react-router-dom

2. 修改主组件（App.js） #

引入路由组件，将列表项改为可跳转的链接，并配置路由规则：

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import BreedDetail from "./BreedDetail";
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      DataisLoaded: false
    };
  }

  componentDidMount() {
    fetch("https://api.thecatapi.com/v1/breeds")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          items: json,
          DataisLoaded: true
        });
      })
  }

  render() {
    const { DataisLoaded, items } = this.state;
    if (!DataisLoaded) return <div><h1>请稍等...</h1></div>;

    return (
      <Router>
        <div className="App">
          <h1>猫咪品种列表</h1>
          <Routes>
            {/* 列表页路由 */}
            <Route path="/" element={
              <ul>
                {items.map((item) => (
                  <li key={item.id}>
                    {/* 点击跳转到对应品种的详情页，携带ID参数 */}
                    <Link to={`/breed/${item.id}`}>{item.name}</Link>
                  </li>
                ))}
              </ul>
            } />
            {/* 详情页路由，接收breedId参数 */}
            <Route path="/breed/:breedId" element={<BreedDetail />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;

3. 创建详情组件（BreedDetail.js） #

新建该组件，通过路由参数获取品种ID，调用API获取详情并展示：

函数组件版本（更推荐） #

import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";

const BreedDetail = () => {
  const { breedId } = useParams();
  const [breed, setBreed] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch(`https://api.thecatapi.com/v1/breeds/${breedId}`)
      .then(res => res.json())
      .then(data => {
        setBreed(data);
        setIsLoading(false);
      })
      .catch(err => console.error(err));
  }, [breedId]);

  if (isLoading) return <div>加载中...</div>;
  if (!breed) return <div>未找到该品种</div>;

  return (
    <div className="breed-detail">
      <Link to="/">返回列表</Link>
      <h2>{breed.name}</h2>
      <p><strong>起源地：</strong>{breed.origin}</p>
      <p><strong>性格：</strong>{breed.temperament}</p>
      <p><strong>寿命：</strong>{breed.life_span}年</p>
      <p><strong>体型：</strong>{breed.weight.metric}kg</p>
      <p><strong>描述：</strong>{breed.description}</p>
      {/* 展示品种图片（如果有） */}
      {breed.image && (
        <img 
          src={breed.image.url} 
          alt={breed.name} 
          style={{ width: '300px', marginTop: '1rem' }} 
        />
      )}
    </div>
  );
};

export default BreedDetail;

类组件版本 #

import React from "react";
import { Link, withRouter } from "react-router-dom";

class BreedDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breed: null,
      isLoading: true
    };
  }

  componentDidMount() {
    // 从路由参数中获取品种ID
    const { breedId } = this.props.match.params;
    // 调用API获取单个品种详情
    fetch(`https://api.thecatapi.com/v1/breeds/${breedId}`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          breed: data,
          isLoading: false
        });
      })
      .catch(err => console.error(err));
  }

  render() {
    const { breed, isLoading } = this.state;
    if (isLoading) return <div>加载中...</div>;
    if (!breed) return <div>未找到该品种</div>;

    return (
      <div className="breed-detail">
        <Link to="/">返回列表</Link>
        <h2>{breed.name}</h2>
        <p><strong>起源地：</strong>{breed.origin}</p>
        <p><strong>性格：</strong>{breed.temperament}</p>
        <p><strong>寿命：</strong>{breed.life_span}年</p>
        <p><strong>体型：</strong>{breed.weight.metric}kg</p>
        <p><strong>描述：</strong>{breed.description}</p>
        {/* 展示品种图片（如果有） */}
        {breed.image && (
          <img 
            src={breed.image.url} 
            alt={breed.name} 
            style={{ width: '300px', marginTop: '1rem' }} 
          />
        )}
      </div>
    );
  }
}

// 类组件需要通过withRouter包裹才能获取路由参数
export default withRouter(BreedDetail);

关键说明 #

• 使用<Link>组件实现无刷新跳转，路由参数breedId用于标识具体品种
• 详情组件通过路由参数获取ID，调用单个品种的API接口获取详情数据
• 处理加载状态和数据不存在的情况，提升用户体验

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