React.js中如何实现点击<li>元素跳转至详情页面？

要实现点击列表项跳转到详情页，你需要用到React路由工具react-router-dom，下面是具体步骤：

1. 安装路由依赖 #

在项目根目录执行命令安装：

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

2. 配置全局路由（修改App.js） #

修改App.js，引入路由组件并配置列表页和详情页的路由规则：

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CharacterList from "./Components/CharacterList";
import Navbar from "./Components/Navbar";
import CharacterInfo from "./Components/characterinfo/CharacterInfo"; // 引入详情组件

function App() {
  const [characters, setCharacters] = useState([]);

  const callBreakingBadAPI = async () => {
    const url = `https://www.breakingbadapi.com/api/characters?name`;
    const resp = await fetch(url);
    const data = await resp.json();
    setCharacters(data);
  };

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

  return (
    <Router>
      <div className="container">
        <Navbar />
        <Routes>
          {/* 列表页路由 */}
          <Route path="/" element={<CharacterList characters={characters} />} />
          {/* 详情页路由，:char_id是动态参数，用来传递角色ID */}
          <Route path="/character/:char_id" element={<CharacterInfo />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

3. 修改列表项组件实现跳转（CharacterListItem.js） #

用react-router-dom提供的Link组件包裹列表项，实现点击跳转：

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

const CharacterListItem = ({ character }) => {
  return (
    <ul>
      {/* 用Link包裹li，跳转路径带上角色ID */}
      <Link to={`/character/${character.char_id}`}>
        <li>Name: {character.name}</li>
      </Link>
    </ul>
  );
};

export default CharacterListItem;

如果不想用Link，也可以通过useNavigate钩子实现点击跳转，代码如下：

import React from "react";
import { useNavigate } from "react-router-dom";

const CharacterListItem = ({ character }) => {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate(`/character/${character.char_id}`);
  };

  return (
    <ul>
      <li onClick={handleClick} style={{ cursor: "pointer" }}>
        Name: {character.name}
      </li>
    </ul>
  );
};

export default CharacterListItem;

4. 实现详情页数据展示（CharacterInfo.js） #

在详情页中通过useParams获取路由参数里的角色ID，然后调用API获取详情数据并展示：

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

const CharacterInfo = () => {
  const { char_id } = useParams(); // 获取路由中的角色ID
  const [character, setCharacter] = useState(null);

  const fetchCharacterDetail = async () => {
    const url = `https://www.breakingbadapi.com/api/characters/${char_id}`;
    const resp = await fetch(url);
    const data = await resp.json();
    setCharacter(data[0]); // API返回的是数组，取第一个元素
  };

  useEffect(() => {
    fetchCharacterDetail();
  }, [char_id]);

  if (!character) {
    return <div>加载中...</div>;
  }

  return (
    <div className="character-detail">
      <h2>{character.name}</h2>
      <p>昵称: {character.nickname}</p>
      <p>生日: {character.birthday}</p>
      <p>职业: {character.occupation.join(", ")}</p>
      <img src={character.img} alt={character.name} style={{ width: "200px" }} />
      {/* 可以根据API返回的字段添加更多展示内容 */}
    </div>
  );
};

export default CharacterInfo;

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