React Router: Pass Props to Nested, Dynamic Pages

Question

Rendering Result components using map and passing props.

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

My Result component that receives props

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

I have my dynamic routes.

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

I have my dynamic ResultPage , but I don't know how to pass the Result component's props to this page.

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

Instead of Link component I have added an onClick event handler to the img tag and then in the handleClick method I'm useHistory.push() to send props from the Result Component to ResultPage component.

The location object has a state property, which now contains the props passed through the Result Component.