React.js Как передать данные из рендера в метод

Question

Я хочу передать данные из Компонента A в Компонент B из Route Link, а затем сделать запрос API в Компоненте B, и я смог передать их из Компонента A в B, но не мог понять, как передать эти данныеизнутри рендеринг в метод, который сделает запрос API.надеюсь, мне было ясно, пожалуйста, посмотрите код ниже.и спасибо заранее.

Компонент A

<ul>
  {this.state.movies.map(movie => (
  <li key={movie.imdbID}>
   <img alt="img" src={movie.Poster} />
   <h1>{movie.Title}</h1>
   <p>{movie.Year}</p>
   <button>
   <Link to={{ pathname: "./productdetail", movieid: movie.imdbID }}>View More</Link></button>
  </li>))}
</ul>

Компонент B

class ProductDetailPage extends React.Component {
  state = {
    movieIdSearch: []
  };

  movieIdRequest(id) {
    axios.get(`http://www.omdbapi.com/?apikey=bcfe7e46&i=${id}`).then(res => {
      const movieById = res.data;
      this.setState({ movieIdSearch: movieById });
    });
  }

  render() {
    const {
      Poster,
      Title,
      Year,
      Released,
      Runtime,
      Genre,
      Country,
      Language,
      Actors,
      Plot
    } = this.state.movieIdSearch;
    return (
      <div>
        {/*how to pass   this.props.location.movieid to a movieIdRequest method*/}
        <img alt="img" src={Poster} />
        <h3>{Title}</h3>
        <div>
          <p>{Year}</p>
          <p>{Released}</p>
          <p>{Runtime}</p>
          <p>{Genre}</p>
          <p>{Country}</p>
          <p>{Language}</p>
        </div>
        <div>
          <h5>{Actors}</h5>
          <p>{Plot}</p>
        </div>
      </div>
    );
  }
}