React实现从图标列表页跳转至对应图标详情页的问题求助

1. 安装React Router依赖 #

确保项目中已安装react-router-dom，如果未安装，执行：

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

2. 配置App.jsx的路由结构 #

修改App.jsx，用路由容器包裹页面组件，定义列表页和详情页的路由规则：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import IconsList from './iconsList';
import IconDetail from './IconDetail';

function App() {
  return (
    <Router>
      <Routes>
        {/* 图标列表页路由 */}
        <Route path="/icons" element={<IconsList />} />
        {/* 图标详情页路由，:id为动态参数，对应图标的唯一标识 */}
        <Route path="/icons/:id" element={<IconDetail />} />
        {/* 可选：默认路由重定向到列表页 */}
        <Route path="/" element={<Navigate to="/icons" />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 确保Data.jsx的数据包含唯一标识 #

你的Data.jsx需要给每个图标添加唯一id字段，示例结构如下：

export const iconsData = [
  {
    id: 'home-icon',
    name: '首页图标',
    icon: <i className="fa-solid fa-house"></i>,
    description: '用于快速导航至网站首页的通用图标'
  },
  {
    id: 'user-icon',
    name: '用户图标',
    icon: <i className="fa-solid fa-user"></i>,
    description: '代表用户账户、个人中心的标识图标'
  },
  // 更多图标数据...
];

4. 修改IconsList组件添加跳转链接 #

在iconsList.jsx中，用Link组件包裹每个图标卡片，点击时跳转到对应详情页：

import { Link } from 'react-router-dom';
import { iconsData } from './Data';

function IconsList() {
  return (
    <div className="icons-container">
      {iconsData.map(icon => (
        <Link key={icon.id} to={`/icons/${icon.id}`} className="icon-card">
          <div className="icon-preview">{icon.icon}</div>
          <h4>{icon.name}</h4>
        </Link>
      ))}
    </div>
  );
}

export default IconsList;

5. 实现IconDetail组件渲染详情内容 #

在IconDetail.jsx中，通过useParams获取路由参数，匹配对应图标数据并渲染：

import { useParams, Link } from 'react-router-dom';
import { iconsData } from './Data';

function IconDetail() {
  const { id } = useParams();
  // 根据路由参数查找对应图标
  const targetIcon = iconsData.find(item => item.id === id);

  // 处理图标不存在的情况
  if (!targetIcon) {
    return <div className="empty-state">未找到该图标信息</div>;
  }

  return (
    <div className="detail-wrapper">
      <div className="detail-icon">{targetIcon.icon}</div>
      <h2>{targetIcon.name}</h2>
      <p>{targetIcon.description}</p>
      {/* 返回列表页的链接 */}
      <Link to="/icons" className="back-link">返回图标列表</Link>
    </div>
  );
}

export default IconDetail;

核心要点 #

• 动态路由参数:id是实现列表到详情页关联的关键，必须保证每个图标有唯一的id
• useParams用于提取路由中的动态参数，Link组件实现无刷新跳转，符合单页应用特性
• 需处理图标不存在的边界情况，避免页面报错

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