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

Question

在其中一个组件中，我可以链接到另一个组件，并且我想通过该链接传递道具以在我链接到的组件中使用。 但由于某种原因我无法让它工作？ 也许我错过了什么？ 我也是第一次使用反应钩子。

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

我尝试了几种不同的方法，我还使用 <Link to="/details params={...data} 并且没有展开运算符。

Answer 1

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

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

然后检索它只需调用：

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