React-router 组件没有路由到我想要的地方

Question

我正在用 React 制作一个电影应用程序。

因此，我正在获取 Genre 中的流派列表。基于流派 ID，我正在创建一条新路线来呈现 MoviesFromGenre 中的电影列表。使用电影的 ID，当我单击 Movie 组件时，我将创建一条到 MovieDetails 组件的新路由。这部分有效。

当我从主页单击 Movie 组件时，问题就出现了。我正在 MoviesFromType 中获取热门电影列表，但是当我单击 Movie 组件时，路由路径不起作用。我希望它转到 MovieDetails 路径 ( /:genreId/:movieId )，而不是似乎转到 /:movieId它会显示 MoviesFromGenre 中的内容。

因此，如果我从主页单击《蜘蛛侠无路回家》，它不会将我重定向到该电影页面的详细信息。但点击“动作”类型，然后点击“蜘蛛侠无路回家”会将我重定向到详细信息页面。

沙盒 链接

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;

电影.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;

Answer 1

看来Movie组件正在使用相对路线路径，并且从主页上与在其中一种类型路由上进行错误构建它们。

使用绝对路径，即带有领先“/”字符的路径，并构建包含类型 id的路径。

示例：

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

<<> < /a>