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

问题描述

在一个组件中，我可以链接到另一个组件，并且我想通过该链接传递道具以在我链接到的组件中使用。但是由于某种原因我无法正常工作？也许我缺少什么？我也是第一次使用react hooks。

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);

我尝试了几种不同的方法，我还使用了

解决方法

Ciao，在最新版本中，您可以使用query通过以下方式在Link中传递参数：

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

然后要检索它，只需调用：

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