React-router component not routing where I want

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 Link

App.js

import "./styles.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Layouts/Navbar/Navbar";
import Layouts from "./Pages/Layouts.js";
import MoviesFromGenre from "./Components/MoviesFromGenre/MoviesFromGenre";
import MovieDetails from "./Components/MovieDetails/MovieDetails";

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/*" element={<Layouts />} />
          <Route path=":genreId/" element={<MoviesFromGenre />} />
          <Route path=":genreId/:movieId" element={<MovieDetails />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

MoviesFromType.js

import React, {useState} from 'react'
import { useParams } from 'react-router-dom'
import useFetch from '../Utils/useFetch'
import '../Utils/useFetch'
import { API_KEY, API_URL} from '../../api/requests'
import Movie from '../Movie/Movie'

function MoviesFromGenre () {
  const BASE_URL = `${API_URL}movie/popular?api_key=${API_KEY}`
  const { data: results, loading, error } = useFetch(BASE_URL, {results: []})
  console.log(results)
  return (
    <div className='movie-list-type'>
      popular
      {
        loading ?
         'Loading' :
        results.results.map(result => (
          <Movie key={result.id} result = {result} />
        ))
      }
      {error ? error : null}
    </div>
  )
}

export default MoviesFromGenre;

Movie.js

import React from 'react'
import { Link } from 'react-router-dom'

function Movie (props) {
  const {result} = props;
  return (
    <div className='movie'>
      <Link to={`${result.id}`}>{result.title}</Link>
    </div>
  )
}

export default Movie;

>Solution :

Seems the Movie component is using relative route paths and incorrectly building them from the home page versus when on one of the genre routes.

Use an absolute path, i.e. a path with a leading "/" character, and build a path that includes the genre id.

Example:

function Movie(props) {
  const { result } = props;
  return (
    <div className="movie">
      <Link to={`/${result.genre_ids[0]}/${result.id}`}>{result.title}</Link>
    </div>
  );
}