React.js How to pass data from render to a Method

Question

I want to pass data from Component A to Component B from a Route Link and then make an API request in Component B and I was able to pass it from Component A to B but couldn't figure out how to pass that data from inside render to a method that will make an API Request. hopefully, I was clear please look at the code below. and thanx in advance.

Component 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>

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