0

Делаю сайт с фильмами и возникла проблема что react router dom меняет ссылку в url, но компонент не перерисовывается. Есть главная страница, где показываются популярны фильмы / сериалы и по клику рисуется другой компонент, в конце компонента, есть список похожих фильмов по клику на который он должен перерисовать контент, но ничего не происходит. Так выглядит компонент для отображения информации о фильме, его url /detail/id

const Detail = () => {
  return (
    <DetailInfo />
    <Similar />
  )
}

Список похожих фильмов

const Similar = () => {
 return (
   <Link to={`/detail/${id}`}>
      какие то изображения, по клику на которые, меняется url
   </Link>
  )
}

При обновлении страницы все перерисовывается, но по клику нет Github

1 ответ 1

1

В файле Detail.jsx в useEffect необходимо добавить в массив зависимостей movieId. Иначе при обновлении movieId не срабатывает useEffect. Так же чтобы страница прокручивалась в начало необходимо добавить window.scrollTo({ top: 0 });. В итоге имеем useEffect вида:

useEffect(() => {
    window.scrollTo({ top: 0 });
    const getMovieInfo = async () => {
      const movieInfoRes = await axios.get(
        `https://api.themoviedb.org/3/${movieId[1]}/${movieId[0]}?api_key=190eda9df5172483ad9af3e885997915&language=ru`
      );
      const movieInfoPersonRes = await axios.get(
        `https://api.themoviedb.org/3/${movieId[1]}/${movieId[0]}/credits?api_key=190eda9df5172483ad9af3e885997915&language=ru`
      );
      const movieTrailerRes = await axios.get(
        `https://api.themoviedb.org/3/${movieId[1]}/${movieId[0]}/videos?api_key=190eda9df5172483ad9af3e885997915&language=ru`
      );
      const movieSimilarRes = await axios.get(
        `https://api.themoviedb.org/3/${movieId[1]}/${movieId[0]}/similar?api_key=190eda9df5172483ad9af3e885997915&language=ru&page=1`
      );

      setMovieInfo(movieInfoRes.data);
      setMovieInfoPerson(movieInfoPersonRes.data);
      setMovieTrailer(movieTrailerRes.data);
      setMovieSimilar(movieSimilarRes.data);
    };
    getMovieInfo();
  }, [movieId]);
1
  • Спасибо большое
    – Alexey
    15 окт 2021 в 17:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.