Reactjs 如何通过路由器链接传递道具？

在其中一个组件中，我可以链接到另一个组件，我希望通过该链接传递道具，以便在我链接到的组件中使用。但是由于某种原因我不能让它工作？也许我错过了什么？我也是第一次使用react挂钩

import React, { useState, useEffect } from "react";
import axios from "axios";
import { withRouter } from "react-router";
import { Link } from "react-router-dom";
import { Card } from "react-bootstrap";

function Scroll() {
  let [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        "https://valkdigital-mock.netlify.app/api/v1/deals"
      );

      await setData(result.data.data);
      console.log(result.data, "data?");
    };

    fetchData();
  }, []);
  const styles = {
    width: "18rem",
    display: "inline-block",
    marginRight: "10px",
    boxShadow: "0 8px 6px -6px black",
  };
  return (
    <div>
      <h1> Top zomer deals</h1>
      <div className="horizontal_slider">
        <div className="slider_container">
          {/* {console.log(data, "result data?")} */}
          {data &&
            data.map((el, index) => {
              console.log(data, "data?");
              return (
                <Card style={styles} key={index}>
                  <Card.Img variant="top" src={el.image} />
                  <Card.Body>
                    <Link to={{ pathname: "/details", params: { data } }}>
                      <Card.Title>{el.title}</Card.Title>
                    </Link>
                    <Card.Text>{el.description}</Card.Text>
                  </Card.Body>
                  <p> p.p van af {el.price}</p>
                </Card>
              );
            })}
        </div>
      </div>
    </div>
  );
}

export default withRouter(Scroll);

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“react router”导入{withRouter}；
从“react router dom”导入{Link}；
从“react bootstrap”导入{Card}；
函数滚动（）{
让[data，setData]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios(
"https://valkdigital-mock.netlify.app/api/v1/deals"
);
等待设置数据（result.data.data）；
console.log（result.data，“data？”）；
};
fetchData（）；
}, []);
常量样式={
宽度：“18rem”，
显示：“内联块”，
marginRight：“10px”，
boxShadow：“0 8px 6px-6px黑色”，
};
返回(
顶级僵尸交易
{/*{console.log（数据，“结果数据？”）}*/}
{数据&&
data.map（（el，索引）=>{
日志（数据，“数据？”）；
返回(
{el.title}
{el.description}
p.p van af{el.price}

);
})}
);
}
使用路由器导出默认值（滚动）；

---

我尝试了几种不同的方法，我也使用了Ciao，在最新版本中，您可以使用

query

以这种方式在

Link

中传递参数：

<Link to={{pathname: `/details`, query: {...data}}} />

console.log(this.props.location.query)