React中基于数组数据实现项目列表渲染及详情页跳转

嘿，我来帮你搞定这个React作品集的跳转和详情展示问题！这其实是React路由结合数据匹配的典型场景，咱们一步步来实现：

1. 先搞定路由配置 #

首先你需要用到React Router来实现页面跳转，如果你还没安装的话，先执行这个命令：

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

然后在你的根组件（比如App.jsx）里配置路由，区分项目列表页和详情页：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProjectList from './components/ProjectList';
import ProjectDetail from './components/ProjectDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<ProjectList />} />
        {/* 用项目id作为路由参数，方便精准匹配 */}
        <Route path="/project/:projectId" element={<ProjectDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 给你的数据加个唯一标识（可选但推荐） #

为了更精准地匹配项目，建议给每个项目对象加一个id字段（毕竟用索引当标识的话，数组顺序变动会出问题）：

const data = [
  { 
    'id': 1,
    'name': 'Cady Studios', 
    'date': 'January 2018', 
    'type': 'UI/UX | Front End Development', 
    'imageUrl': require('../images/projectOneImage.png'), 
    'link': '', 
    'brief': '', 
    'tech': '', 
  },
  { 
    'id': 2,
    'name': 'SWP Connect', 
    'date': 'March 2018', 
    'type': 'UI/UX', 
    'imageUrl': require('../images/projectTwoImage.png'),
    // 其他字段...
  }
];

3. 渲染项目列表并添加跳转链接 #

在ProjectList组件里，遍历data数组，把每个项目做成可点击的链接，指向对应的详情页路由：

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

function ProjectList() {
  return (
    <div className="project-list">
      {data.map(project => (
        <div key={project.id} className="project-item">
          {/* 点击项目卡片跳转到详情页 */}
          <Link to={`/project/${project.id}`}>
            <img src={project.imageUrl} alt={project.name} />
            <h3>{project.name}</h3>
            <p>{project.date} | {project.type}</p>
          </Link>
        </div>
      ))}
    </div>
  );
}

export default ProjectList;

4. 详情页获取参数并渲染对应项目数据 #

在ProjectDetail组件里，用useParams钩子拿到路由里的projectId，然后从data数组中找到匹配的项目，再渲染它的详情：

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

function ProjectDetail() {
  const { projectId } = useParams();
  // 把路由参数转成数字，因为我们的id是数字类型
  const project = data.find(item => item.id === parseInt(projectId));

  // 如果没找到对应的项目，可以做个兜底提示
  if (!project) {
    return <div>项目不存在哦～</div>;
  }

  return (
    <div className="project-detail">
      <h1>{project.name}</h1>
      <p className="date">{project.date}</p>
      <p className="type">{project.type}</p>
      <img src={project.imageUrl} alt={project.name} className="detail-image" />
      <div className="brief">{project.brief}</div>
      <div className="tech">使用技术：{project.tech}</div>
      {project.link && <a href={project.link} target="_blank" rel="noopener noreferrer">查看在线演示</a>}
    </div>
  );
}

export default ProjectDetail;

一些小细节提醒 #

• 如果你不想给数据加id，也可以用项目名称作为路由参数，但要注意处理空格和特殊字符（可以用encodeURIComponent和decodeURIComponent来处理）
• 图片路径如果出现加载问题，检查一下require的路径是否正确，或者换成import方式导入图片会更稳妥
• 可以给详情页加个返回按钮，用useNavigate钩子实现返回列表页的功能

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