React router dom меняет ссылку, но, не перерисовывает компонент

Question

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

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

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

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

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

Answer 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]);

БЛОГ НА HUSL

React router dom меняет ссылку, но, не перерисовывает компонент

Ответы (1 шт):