Как обновить данные не перезагружая страницу?

Я хочу выводить списки разных типов фильмов, для этого в хедере у меня есть три ссылки " Top rated Upcoming Now playing". Для того чтобы рендерить список фильмов я использую один компонент, API,react-router-dom. Выглядит это следующим образом: ROUTE

<Route path="/:name" children={<ChooseListFilm />} />

HEADER

<li>
   <Link to="/top_rated">
          Top rated
   </Link>
</li>
<li>
   <Link to="/upcoming">
          Upcoming
   </Link>
</li>
<li>
   <Link to="/now_playing">
          Now playing
   </Link>
</li>

export default Header;

ChooseListFilm

export default function ChooseListFilm() {
    let {name} = useParams(); // Получаю "top_rated" или "upcoming" или "now_playing"
  return (
    <div className="user">
        <ListFilms  filmType={name}/> // передаю в компонент в котором буду рендерить
    </div>
  );
}

В этом компоненте я формирую ссылку с которой буду получать список фильмов

componentDidMount(){
        let filmApi =`https://api.themoviedb.org/3/movie/${this.props.filmType}?api_key=6f7c9fe2b5229b4b0b6dbe66fed3ef18&language=en-US&page=1`;
        this.props.getListFilms(filmApi);
        console.log(filmApi)
    }

      ComponentDidUpdate(prevProps){
        if (this.props.filmType !== prevProps.filmType) {
            let filmApi =`https://api.themoviedb.org/3/movie/${this.props.filmType}?api_key=6f7c9fe2b5229b4b0b6dbe66fed3ef18&language=en-US&page=1`;
            this.props.getListFilms(filmApi);
            console.log(filmApi)
        }
    }


    render() {
        return (
            <div>
                <h1>List films </h1>
            </div>
        );
    }
}

function mapStateToProps(state){
    return{
        filmApiTemplate: state.ListFilm.filmApiTemplate,
        activePage: state.ListFilm.activePage,
    }
}

function mapDispatchToProps(dispatch){
    return{
        getListFilms: (filmApi)=>dispatch(getListFilms(filmApi)),
    }
}

ACTION redux

export function getListFilms(filmApi){
    return(dispatch)=>{
        console.log(filmApi);
    }
}

То есть когда я переключаюсь между ссылками в хадере Я получаю значение которые потом подставляю в ссылку с которой получаю API. Но у меня не получается при переходом между ссылками менять значение которые я подставляю. В данном случае ComponentDidUpdate не работает.Как мне правильно использовать ComponentDidUpdate.Или может есть какой-то другой способ чтобы решить эту проблему. Спасибо!