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

Question

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

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

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

中的内容

所以，如果我从主页点击蜘蛛侠绝路回家，它不会将我重定向到该电影页面的详细信息。但是点击动作类型，然后点击蜘蛛侠无路回家会将我重定向到详细信息页面。

沙盒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;

Answer 1

似乎 Movie 组件正在使用相对路线路径，并且从主页错误地构建它们而不是在其中一种类型路线上。

使用绝对路径，即以 "/" 字符开头的路径，并构建包含 genre id 的路径。

示例：

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

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

React-router component not routing where I want

reactjs

react-router

react-router-dom

react-hooks