I'm making a movie app in React.

So I'm fetching a list of genres in Genre. Based on the genre id I'm creating a new route to render a list of movies in MoviesFromGenre. Using the movie's id, when I click on a Movie component I'm making a new route to a MovieDetails component. This part works.

The problem comes when I click on a Movie component from the homepage. I'm fetching a list of popular movies in MoviesFromType, but when I click on a Movie component the routing path doesn't work. I would like for it to go to the MovieDetails path ( /:genreId/:movieId ), instead it seems to go to /:movieId and it displays what's in MoviesFromGenre.

So, If I click on Spider-Man No Way home from the homepage, it won't redirect me to that movies page details. But clicking on the Action genre and then on Spider-Man No Way Home redirects me to the details page.

Sandbox