组件未呈现但是 URL 更改了 React Router v6

Question

每当用户单击图像时，我一直在努力尝试实现到另一个页面的重定向。 这些图像是从电影 API 中获取的，并映射到 img 标签中。 我希望图像将用户重定向到名为视频的页面，用户可以在其中播放各自的视频。 目前，当我单击图像时，URL 会发生变化，但什么也没有发生。下面是我的代码。 我是初学者，希望得到任何帮助

卡片.js

import React from "react"
// import Hover from "./Hover"
import { Link } from "react-router-dom"
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import Video from "./Video"
import Error from "./Error"
export default function Card() {
const [all, setAll] = React.useState([])
const [movie, setMovie] = React.useState(false)
const [tv, setTv] = React.useState(false)
const [allmovies, setAllMovies] = React.useState([])
const [tvshows, setTvshows] = React.useState([])


React.useEffect(() => {
    fetch('https://api.themoviedb.org/3/trending/all/week?api_key=key')
        .then(data => {
            return data.json()
        }).then(all => {
            setAll(all.results)
        })
        .catch((err) => {
            console.log(err.message);
        })

}, [])
React.useEffect(() => {
    fetch('https://api.themoviedb.org/3/trending/movie/week?api_key=key')
        .then(data => {
            return data.json()
        }).then(movies => {
            setAllMovies(movies.results)
        })
        .catch((err) => {
            console.log(err.message);
        })
}, [])

React.useEffect(() => {
    fetch('https://api.themoviedb.org/3/trending/tv/week?api_key=key')
        .then(data => {
            return data.json()
        }).then(tv => {
            setTvshows(tv.results)
            console.log(tvshows)
        })
        .catch((err) => {
            console.log(err.message);
        })

}, [])
function toggleMovie() {
    setMovie(Movieprev => !Movieprev)
    if (movie === true) {
        console.log("am trying")
        setAll(allmovies)
    }
}
function toggleTv() {
    setTv(Tvprev => !Tvprev)
    if (tv === true) {
        setAll(tvshows)
    }
}

return (
    <div >
        <div id="top">
            <h1>Recommended</h1>
            <button onClick={toggleMovie}>Movies</button>
            <button onClick={toggleTv}> Shows</button>
        </div>
        {all.map(one => (
            <div id="movie-card">
                <Router>
                    <Link to="/Video"><img src={"https://image.tmdb.org/t/p/original/" + one.poster_path} alt={one.original_title}/></Link>
                    <Routes>
                        <Route path="/Video" element={<Video />} />
                        <Route path="*" element={<Error />} />
                    </Routes>
                </Router>

                <div id="media_type">
                    <h5>{one.original_title || one.original_name}</h5>
                    <h6>{one.media_type}</h6>
                </div>
                <h6>{one.release_date || one.first_air_date}</h6>
            </div>
        ))}
        {/* <div id="hover">
        <Hover data={one}/>
        </div> */}
    </div>
)
 }

我的 App.js

import React from "react"
import Nav from "./components/nav"
import Card from "./components/card"
import Slider from "./components/ControlledCarousel"

export default function App() {
return (
    <div>
        <Nav />
        <Slider />
        <Card />
    </div>

  )
  }

视频.js

import React from 'react'

export default function Video() {
 return (
 <div>
    <h1>video</h1>
</div>
 )
}

Answer 1

所以经过一番努力我发现我必须像在 index.js 中那样做路由并删除我放在 card.js 中的路由

ReactDOM.render(  
<React.StrictMode>
 <Router>
<Routes>
<Route path="/" element={<App />} />
<Route path="/Video" element={<Video/>} />
</Routes>
</Router>
</React.StrictMode>,
document.getElementById("root"))