如何在 React 中将道具从一个页面传递到另一个页面？

Question

问题的解决版本，代码行是正确的，我用控制台日志检查了所有参数是否正确传递：

我正在做一个网站，我想在其中展示我的个人项目，所有这些都在页面之间带有组件。主要内容显示在有这个组件的工作页面：

<WorkText name={"personal1"} text={"some text goes here"} url={"./public/img1.jpg"}/>

每次我想展示一个新项目时，我只想添加这一行，并使其动态化。

组件来自这里：

import React from "react";
import "./WorkText.scss";
import { Link } from "react-router-dom";

const WorkText = ({name, text, url}) => {

   const Data = {
      name,
      text,
      url
    }

  return (
    <p className="work-text-parent">
      <a className="bar">{type}/</a><Link to={{ pathname: "/work/" + name}} state={Data}>{name}</Link>
    </p>
  );
};

export default WorkText;

并想将其导入具有此结构的页面：

import React from "react";
import { useLocation } from "react-router-dom";
import "./WorkDetail.scss";

const WorkDetail = () => {
  
  const location = useLocation();
  const { type, name, text, url } = location.state;
  console.log(location.state);

  return (
      <div className="work-parent2">
        <h2>{name}</h2>
        <img src={url} alt={name} />
        <p>{text}</p>
      </div>
  );
}

export default WorkDetail;

我目前正在使用 useParams，但我只获得名为 workname 的页面链接，这就是我在 App.js 中的调用方式：

<Route exact path="/work/:workname" element={<><NavbarExtended /><WorkDetail /><Footer /></>}/>

我无法让道具工作，不知道是否使用 useLocation，useHistory ...我有点迷路，想将道具传递到工作详细信息页面。

你可以在这个链接到工作页面中看到它是如何工作的 https://marclopez.oddsolutionslab.com/

Answer 1

要在 React 中将 props 从一个页面传递到另一个页面，您可以使用 React Router 提供的

Link

组件。您可以在

to

组件的

Link

道具中将道具作为对象传递，然后使用React Router提供的

useLocation

钩子在接收组件中访问这些道具。

您可以修改您的

WorkText

组件以将道具传递给

WorkDetail

组件：

import React from "react";
import "./WorkText.scss";
import { Link } from "react-router-dom";

const WorkText = ({name, text, url}) => {

  return (
    <p>
      <Link to={{ pathname: "/work/" + name, state: { text, url } }}>{name}</Link>
    </p>
  );
};

export default WorkText;

然后，在您的

WorkDetail

组件中，您可以使用

useLocation

钩子访问这些道具，如下所示：

import React from "react";
import "./WorkDetail.scss";
import { useLocation } from "react-router-dom";

const WorkDetail = () => {
  
  const location = useLocation();
  const { name } = useParams();
  const { text, url } = location.state;

  return (
      <div className="work-parent2">
        <h2>{name}</h2>
        <img src={url} alt={name} />
        <p>{text}</p>
      </div>
  );
}

export default WorkDetail;