React.js如何通过<Link to>传递id或props到其他组件获取专辑数据

1. 调整 ListItem.jsx 跳转逻辑 #

原来的Link组件传参方式不符合React Router v6的规范，我们改为携带专辑ID跳转，避免页面刷新后数据丢失：

// ListItem.jsx 关键修改部分
return (
  {/* 跳转路径携带album.id参数 */}
  <Link to={`/itemPage/${album.id}`}>
    <div 
      className={"listItem"}
      style={{left: isHovered && index * 225 - 50 + index * 2.5}}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {album.id}
      {/* 其余原有代码保持不变 */}
    </div>
  </Link>
)

2. 修改 App.jsx 路由配置 #

新增动态路由参数albumId，用于接收跳转携带的专辑ID：

<Route path="/itemPage/:albumId" element={<ItemPage/>}/>

3. 重写 ItemPage.jsx 数据获取逻辑 #

在ItemPage中获取路由参数，请求对应专辑数据后传递给Cover组件：

import {useParams, useEffect, useState} from 'react'
import axios from 'axios'
import Navbar from './Navbar' // 按你实际文件路径调整
import Cover from './Cover' // 按你实际文件路径调整

const ItemPage = () => {
  // 获取路由中的专辑ID
  const {albumId} = useParams()
  const [currentAlbum, setCurrentAlbum] = useState({})
  const [lists, setLists] = useState([]);

  useEffect(() => {
    const getAlbumDetail = async () => {
      try{
        const res = await axios.get("/albums/find/" + albumId , {
          headers:{
            token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxOThmM2YwNzdiYzI5ZTkyZTRlZDU5MCIsImlzQWRtaW4iOnRydWUsImlhdCI6MTYzODM2MzkyNSwiZXhwIjoxNjM4Nzk1OTI1fQ.LNyVCvxwCncOWhLS_uGAXBh-WX0GQffe3CeqcMzmZK4"
          },
        });
        setCurrentAlbum(res.data)
      } catch (e) {
        console.log(e)
      }
    }
    if(albumId) getAlbumDetail()
  },[albumId])

  return (
    <div className={"itemPage"}>
      <Navbar/>
      {/* 将获取到的专辑数据作为props传给Cover */}
      <Cover album={currentAlbum}/>
    </div>
  );
};
export default ItemPage

4. 调整 Cover.jsx 接收props渲染 #

Cover组件接收父组件传递的album参数，直接使用对应字段渲染即可：

// 组件入参接收album
const Cover = ({album}) => {
  return (
    <div className={"cover"}>
      <div className="coverImage">
        <img src={album.img} alt="专辑封面"/>
      </div>
      <div className="coverInfo">
        <Card>
          <CardContent>
            <Typography textAlign={"center"} gutterBottom variant="h5" component="div">
              {album.title}
            </Typography>
            <Typography variant="body2" color="white" textAlign={"center"} fontSize={150}>
              {album.rating}
            </Typography>
          </CardContent>
          {album.date} {album.title}
          <div className="cardImages"></div>
        </Card>
      </div>
      <Watch/>
      <Similiar/>
    </div>
  )
}
export default Cover

注意事项 #

• 上述方案支持页面刷新后仍能正常加载对应专辑数据，比直接通过路由state传临时数据更稳定
• 代码中写死的token建议后续放到axios全局拦截器中统一配置，避免重复编码

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