Я создаю веб-сайт mov ie, используя api для перемещенной БД, и у меня проблема с подключением ссылки в кнопке для передачи

Question

Я создаю веб-сайт mov ie, использующий API для перемещенной БД, и у меня возникла проблема с подключением ссылки внутри кнопки для передачи "http://localhost: 3000 / movies / 454626? Api_key = & language = en- US"с id для mov ie Страница сведений. вот мои коды.

В MoviesContainer я хочу перейти к MovieDetail и заставить его подключиться к компоненту WillMount () для отображения.

MoviesContainer. js

import React, { Component } from 'react';
import axios from 'axios';
import './MoviesContainer.css';
import config  from '../../config.js';
import { Link } from 'react-router-dom';



export default class MoviesContainer extends Component{
  constructor(props){
    super(props);

    this.state= {
      moviesList: []
    }
  }

  componentWillMount(){
    axios.get(`${config.apiURL}/movie/now_playing${config.apiKey}`).then(response=> {
      console.log(response.data.results);
      this.setState({ moviesList: response.data.results });
    });
  }

  render(){
    const imgURL= 'http://image.tmdb.org/t/p/original';
    const movies= this.state.moviesList.map((film, index)=> {
      return(
        <div key={ index } className='movie-card'>
        <div className="container">
          <img style={{ height: '85%', width: '100%' }} src={ imgURL + film.poster_path } alt='movie poster'></img>
                <div className="overlay">
                    <div className="movie_nam">
                       <div className="MCview">{ film.film_name }</div>
                             <h1>{ film.release_dates}</h1>
                              <div className="MCoverview">{ film.synopsis_long }</div>
                        </div>
                    <Link  to={ `/movies/${film.id}${config.apiKey}&language=en-US` }>
                         <button  className='successW'
                            onClick={ ()=> this.componentWillMount() }
                                          onKeyPress= { (e)=> {
                                            if(e.charCode === 13){
                                              this.componentWillMount();
                                            }
                                          }
                                }
                         > GET INFO </button>
                    </Link>

                </div>
          </div>
        </div>
      )
    });

    return(
      <div className='movies-container-main'>
        { movies }

      </div>
    )
  }
}

MovieDetail. js

import React, { Component } from 'react';
import axios from 'axios';
import './MovieDetail.css';
//import { Link } from 'react-router-dom';
import config from '../../config.js';



export default class MovieDetail extends Component{
  constructor(props){
    super(props);

    this.state= {
      movie: []
    }
  }
  componentWillMount(){
    axios.get(`${config.apiURL}/api/movies/${config.apiKey}`).then(response=> {
      console.log(response.data.results);
      this.setState({ moviesList: response.data.movie });
    });
  }

  render(){
    const imgURL= 'http://image.tmdb.org/t/p/original';
    const MovieDetail= this.state.movie.map((movie, index)=>{
      return(
        <div className='moviecd'>
          <img style={{ height: '85%', width: '100%' }} src={ imgURL + movie.picimage } alt='movie poster'></img>
          <div className="MCview">{ movie.film_name }</div>
        </div>
      )
      });
      return(
            <div className='view-container'>
              <h1>You searched </h1>
              <div className='results-container'>
                { MovieDetail }
              </div>
            </div>
          )
    }
  }

сервер. js

const express= require('express');
const { json }= require('body-parser');
const cors= require('cors');
const { apiURL, apiKey }= require('../config.js');
const axios= require('axios');

// Begin Server
const app= express();
const port= 3001;

// Middlewares
app.use(json());
app.use(cors());

// Endpoints
app.get('/api/popular/movie', (req, res, next)=> {
  axios.get(`${apiURL}/movie/now_playing{apiKey}`).then(response=> {
    res.status(200).json(response.data);
  });
});

app.get(`/api/search/movies/:name`, (req, res, next)=> {
  axios.get(`${apiURL}/search/movie${apiKey}&language=en-US&page=1&include_adult=false&query=${req.params.name}`).then(response=> {
    res.status(200).json(response.data);
  });
});
app.get(`/api/movies/:id`, async (req, res, next)=> {
   console.log(`Movie with id: ${ req.params.id } searched `);
   axios.get(`${apiURL}/movie/{req.params.id}${apiKey}&language=en-US`).then(async response=> {
           console.log(response.data.films)
           let films = await response.data.films.map(film =>{
               return {
                   id:film.id,
                   name:film.name,
                   textLong:film.overview,
                   picimage:film.images.poster_path
               }
           })
       res.status(200).json(films);
     }).catch(err => {
         console.log(err);
     });
});

app.listen(port, ()=> {
  console.log(`Server is listening on port: ${port}`);
});