点击React的Card组件时如何传递相同数据到另一页面并展示

实现方法如下，两种常用方案可按需选择： #

方案1：路由state传参（无需二次请求，刷新页面数据会丢失） #

步骤1：修改Card组件Link传参

找到Card.js里的<Link to="/details">，修改为：

<Link 
  to="/details"
  state={{ currentApp: app }}
>

步骤2：详情页获取参数

在你的详情页组件中使用useLocation钩子获取传递的数据：

import React from 'react';
import { useLocation } from 'react-router-dom';

const DetailsPage = () => {
  const location = useLocation();
  // 拿到传递的卡片对应数据
  const appData = location.state?.currentApp;

  // 直接渲染数据即可
  return (
    <div>
      <h1>{appData?.name}</h1>
      <p>{appData?.type}</p>
      {/* 其他字段按需渲染 */}
    </div>
  );
};

export default DetailsPage;

方案2：动态路由传参（刷新页面数据不丢失，需要二次请求） #

步骤1：配置动态路由

在你的路由配置文件中添加详情页的动态路由规则（以react-router-dom v6为例）：

import { Routes, Route } from 'react-router-dom';
import DetailsPage from './DetailsPage';
// 其他组件导入

function App() {
  return (
    <Routes>
      {/* 你的其他原有路由 */}
      <Route path="/details/:appId" element={<DetailsPage />} />
    </Routes>
  );
}

步骤2：修改Card组件跳转链接

找到Card.js里的<Link to="/details">，修改为（这里假设你的每条app数据有唯一id字段，若无可以替换为其他唯一标识比如name）：

<Link to={`/details/${app.id}`}>

步骤3：详情页获取参数并请求对应数据

在详情页组件中拿到id后请求对应数据再渲染：

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

const DetailsPage = () => {
  // 拿到路由中的appId参数
  const { appId } = useParams();
  const [appData, setAppData] = useState(null);
  const url = 'https://blalalalalalla'; // 和Sidebar里的接口地址保持一致

  useEffect(() => {
    axios.get(url)
      .then(res => {
        // 过滤出对应id的app数据
        const targetApp = res.data.find(item => item.id === Number(appId));
        setAppData(targetApp);
      })
      .catch(err => console.log(err));
  }, [appId]);

  return (
    <div>
      {appData ? (
        <>
          <h1>{appData.name}</h1>
          <p>{appData.type}</p>
          {/* 其他字段按需渲染 */}
        </>
      ) : <p>加载中...</p>}
    </div>
  );
};

export default DetailsPage;

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