React Router：将道具传递给嵌套的动态页面

Question

使用map和传递道具渲染Result组件。

<div className="results">
  {data.map((movie) => (
    <Result
      poster={movie.poster_path}
      alt={movie.title}
      key={movie.id}
      id={movie.id}
    />
  ))}
</div>

接收道具的我的Result组件

export default function Result(props) {
  const { poster, alt, id } = props;

  return (
    <div className="result">
      <Link to={`/results/${id}`}>
        <img
          src={
            poster
              ? `https://image.tmdb.org/t/p/original/${poster}`
              : "https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg"
          }
          alt={alt}
        />
      </Link>
    </div>
  );
}

我有我的动态路线。

<Route path={"/results/:id"}>
   <ResultPage />
</Route>

我有我的动态ResultPage ，但我不知道如何将Result组件的道具传递给这个页面。

export default function ResultPage(props) {
  const { id } = useParams();

  return (
    <div className="resultPage">
      <h3>this is page: {id}</h3>
      {/* I WANT TO PASS & DISPLAY PROPS HERE */}
    </div>
  );
}

Answer 1

Result.jsx

export default function Result(props) {
  const { poster, alt, id } = props;
  const history = useHistory();
  const handleClick = () => {
    history.push({
      pathname: `/results/${id}`,
      state: {
         poster,
         alt
       }
    })
  }
  return (
    <div className="result">
        <img
          onClick ={handleClick}
          src={
            poster
              ? `https://image.tmdb.org/t/p/original/${poster}`
              : "https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg"
          }
          alt={alt}
        />
    </div>
  );
}

ResultPage.jsx

export default function ResultPage(props) {
  const { id } = useParams();
  const location = useLocation();
  return (
    <div className="resultPage">
      <h3>this is page: {id}</h3>
      <p> {location.state.poster} </p>
    </div>
  );
}

我在img标签中添加了一个onClick事件处理程序，而不是Link组件，然后在handleClick方法中，我使用了useHistory.push()将props从 Result 组件发送到ResultPage组件。

location object 有一个state属性，它现在包含通过Result组件传递的props 。