React中如何点击列表项跳转至新页面展示完整物品信息？

因为要展示大量物品信息，新页面比弹窗更适合，推荐使用React Router来实现单页内的页面跳转，步骤如下：

1. 安装React Router DOM #

首先在项目中安装路由依赖：

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

2. 配置全局路由 #

在你的根组件（比如App.js）中配置路由规则，指定详情页的路径：

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

function App() {
  // 假设你有物品列表数据
  const items = [
    { InventryID: '1', description: '物品A', annotation: '测试备注A', fullInfo: '物品A的完整详细信息...' },
    { InventryID: '2', description: '物品B', annotation: '测试备注B', fullInfo: '物品B的完整详细信息...' }
  ];

  return (
    <Router>
      <Routes>
        {/* 列表页面路由 */}
        <Route path="/" element={
          <div className="item-list">
            {items.map(item => (
              <DummyItem key={item.InventryID} {...item} />
            ))}
          </div>
        } />
        {/* 详情页路由，:id是动态参数，对应物品ID */}
        <Route path="/items/:id" element={<ItemDetail items={items} />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 修改DummyItem组件，实现点击跳转 #

把整个列表项区域改成可点击的，有两种方式：

方式一：用Link组件（推荐，符合路由规范） #

import "./DummyItem.css"
import DummyDate from "./DummyDate"
import { Link } from 'react-router-dom'; // 导入Link

export default function DummyItem(props) {
  return (
    {/* 用Link包裹整个列表项，to属性指定跳转路径，带上物品ID */}
    <Link to={`/items/${props.InventryID}`} className="dummy-item">
      <DummyDate />
      <div className={"dummy-item__description"}>
        <h2>{props.description}</h2>
        <p>Annotations: {props.annotation}</p>
        <span className="dummy-item__inventory">Inventory ID: {props.InventryID}</span> {/* 把按钮改成普通文本，因为整个区域可点击 */}
      </div>
    </Link>
  )
}

方式二：用useNavigate钩子（适合需要额外点击逻辑的场景） #

import "./DummyItem.css"
import DummyDate from "./DummyDate"
import { useNavigate } from 'react-router-dom'; // 导入useNavigate

export default function DummyItem(props) {
  const navigate = useNavigate(); // 初始化导航函数

  const handleClick = () => {
    // 这里可以加额外逻辑，比如日志、状态更新等
    navigate(`/items/${props.InventryID}`); // 跳转至详情页
  };

  return (
    <div className="dummy-item" onClick={handleClick} style={{ cursor: 'pointer' }}> {/* 加cursor提示可点击 */}
      <DummyDate />
      <div className={"dummy-item__description"}>
        <h2>{props.description}</h2>
        <p>Annotations: {props.annotation}</p>
        <button type="button" className="dummy-item__inventory" onClick={(e) => {
          e.stopPropagation(); // 阻止按钮点击冒泡到父元素，避免重复跳转
          alert('Show Details'); // 保留原按钮逻辑（可选）
        }}>Inventory ID: {props.InventryID}</button>
      </div>
    </div>
  )
}

4. 创建详情页组件（ItemDetail.js） #

这个组件负责展示物品的完整信息，通过动态路由参数获取物品ID，然后匹配对应数据：

import { useParams } from 'react-router-dom';
import DummyDate from "./DummyDate";

export default function ItemDetail({ items }) {
  const { id } = useParams(); // 获取路由中的物品ID参数
  const item = items.find(item => item.InventryID === id); // 从列表数据中找到对应物品

  if (!item) {
    return <div className="item-detail">未找到该物品</div>;
  }

  return (
    <div className="item-detail">
      <h1>{item.description}</h1>
      <DummyDate /> {/* 可以复用日期组件 */}
      <p>库存ID: {item.InventryID}</p>
      <p>备注: {item.annotation}</p>
      <div className="full-info">
        <h3>完整信息</h3>
        <p>{item.fullInfo}</p>
        {/* 这里添加所有需要展示的大量信息 */}
      </div>
    </div>
  );
}

5. 样式调整（可选） #

给dummy-item类添加鼠标指针样式，提示用户可点击：

.dummy-item {
  /* 原有样式 */
  cursor: pointer;
}

这种方案的优势在于：

• 专门的页面可以充分利用屏幕空间展示大量信息，用户可自由滚动浏览
• 符合浏览器的导航习惯，支持前进/后退按钮
• 路由参数清晰，便于后续扩展（比如分享详情页链接）

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