React实现点击书籍图片跳转对应书评页面的问题求助

步骤1：确保项目已安装React Router #

如果还没安装react-router-dom，先执行安装命令：

npm install react-router-dom

步骤2：配置路由规则 #

在根路由配置文件（比如App.js）中，添加书评页面的路由，示例如下：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Books from './path/to/Books'; // 替换为你的Books组件实际路径
import BookReview from './path/to/BookReview'; // 你的书评页面组件

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/books" element={<Books />} />
        {/* 新增书评页面路由，通过bookId参数传递书籍ID */}
        <Route path="/book-review/:bookId" element={<BookReview />} />
      </Routes>
    </Router>
  );
}

export default App;

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

在Book.js中，使用useNavigate钩子实现点击图片跳转的功能：

import React from "react";
import { useNavigate } from "react-router-dom"; // 导入导航钩子
import "./Book.css";

const Book = ({ book }) => {
  const { _id, name, img } = book;
  const navigate = useNavigate(); // 获取导航函数

  // 点击图片时跳转到对应书评页面
  const handleBookClick = () => {
    navigate(`/book-review/${_id}`);
  };

  return (
    <div className="card book-container card-compact w-56 bg-base-100 shadow-2xl">
      <figure>
        <img 
          className="h-full w-full cursor-pointer" 
          src={img} 
          alt={name} // 优化alt文本为书籍名称
          onClick={handleBookClick}
        />
      </figure>
    </div>
  );
};

export default Book;

补充：使用Link组件的替代方案 #

如果更倾向于用React Router原生的Link组件（无需手动编写onClick逻辑），可以这样修改Book组件：

import React from "react";
import { Link } from "react-router-dom"; // 导入Link组件
import "./Book.css";

const Book = ({ book }) => {
  const { _id, name, img } = book;

  return (
    <div className="card book-container card-compact w-56 bg-base-100 shadow-2xl">
      <figure>
        {/* 用Link包裹图片，点击自动跳转 */}
        <Link to={`/book-review/${_id}`}>
          <img 
            className="h-full w-full" 
            src={img} 
            alt={name}
          />
        </Link>
      </figure>
    </div>
  );
};

export default Book;

后续：在书评页面获取书籍ID #

在BookReview组件中，通过useParams钩子获取URL中的书籍ID，进而加载对应书评数据：

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

const BookReview = () => {
  const { bookId } = useParams(); // 获取URL中的书籍ID

  // 根据bookId获取对应书籍的书评数据（可调用API或从本地数据中匹配）
  return (
    <div>
      <h2>书籍ID：{bookId}的书评页面</h2>
      {/* 渲染具体书评内容 */}
    </div>
  );
};

export default BookReview;

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