如何在React.js中用useParams获取数组索引实现图片详情页

因为API返回的图片数据没有唯一ID字段，我们可以直接用数组索引作为路由参数来实现跳转和详情展示，具体步骤如下：

1. 传递数组索引给图片组件 #

在渲染图片列表的组件（比如你的HomePage）中，遍历图片数组时把当前元素的索引附加到每个图片对象上，传给ImageRow组件：

// HomePage.js 示例代码
import ImageRow from './ImageRow';

const HomePage = ({ images }) => {
  return (
    <div className="grid grid-cols-4 gap-4 p-4">
      {/* 遍历数组时，把index添加到image对象中 */}
      {images.map((imageItem, index) => (
        <ImageRow 
          key={index} 
          image={{ ...imageItem, index }} 
        />
      ))}
    </div>
  );
};

export default HomePage;

2. 确保路由跳转携带索引参数 #

你的ImageRow组件里的跳转逻辑已经正确使用了image.index，保持即可（可以给div加个鼠标指针样式提升交互体验）：

// ImageRow.js
import React from "react"
import { useNavigate } from "react-router";

const ImageRow = ({ image }) => { 
    const navigate = useNavigate();
    return (
        <div onClick={()=>navigate(`/image/${image.index}`)} className="cursor-pointer">
            <img 
                className="border object-cover items-stretch border-gray-300 rounded-2xl" 
                src={image.url} 
                alt="设计图" 
            />
        </div>
    )
}

export default ImageRow;

3. 在详情页通过索引获取对应图片数据 #

首先需要把图片数组传递给ImageDetail组件，最简单的方式是在App组件中统一管理图片数据，再通过props传递：

修改App.js，管理图片数据 #

import { useState, useEffect } from 'react'
import { Route, Routes } from 'react-router'
import HomePage from './components/HomePage'
import ImageDetail from './components/ImageDetail'

function App() {
  const [images, setImages] = useState([]);

  // 模拟从API获取数据，替换成你的实际请求逻辑
  useEffect(() => {
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => setImages(data))
      .catch(err => console.error('获取图片失败:', err));
  }, []);

  return (
    <div>
      <Routes>
        <Route index element={<HomePage images={images} />} />
        {/* 把图片数组传给详情页 */}
        <Route path='/image/:index' element={<ImageDetail images={images} /> } />
      </Routes>
    </div>
  )
}

export default App

修改ImageDetail组件，展示详情 #

通过useParams拿到路由里的索引，转成数字后从数组中取出对应图片，再渲染详情：

// ImageDetail.js
import React from "react";
import { useParams } from "react-router";

const ImageDetail = ({ images }) => {
    const { index } = useParams();
    // 路由参数默认是字符串，要转成数字才能正确访问数组元素
    const targetImage = images[parseInt(index)];

    // 如果索引无效，显示提示
    if (!targetImage) {
        return <div className="p-8">该图片不存在</div>;
    }

    return (
        <div className="p-8 max-w-3xl mx-auto">
            <img 
                src={targetImage.url} 
                alt={`设计图 ${index}`} 
                className="w-full h-auto rounded-xl shadow-lg" 
            />
            <div className="mt-6 space-y-2">
                <p><strong>颜色：</strong>{targetImage.color}</p>
                <p><strong>材质：</strong>{targetImage.material}</p>
                <p><strong>艺术风格：</strong>{targetImage.artwork}</p>
                <p><strong>效果：</strong>{targetImage.effect}</p>
            </div>
        </div>
    )
}

export default ImageDetail;

注意事项 #

• 如果图片数组会动态增删或排序，用index作为key可能导致渲染问题，此时可以用图片的url作为key（假设url是唯一的）
• 路由参数默认是字符串类型，必须转成数字才能正确访问数组元素

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