How do I navigate to another page? - reactjs

Question

I take data from the resource thememoviedb. I received a certain number of movies, and I also displayed them on the page. I try to go to each movie to see the details in the file Movie_Details.js. In this file, I get data from the resource as well, but the transition does not occur, and the Movie_Details component is drawn at the bottom. How do I go to the Movie Details page and display the data? Thank you
App.js
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import {Popular_Movies} from "./Components/Popular_Movies/Popular_Movies";
import {Movie_Detail} from "./Components/Popular_Movies/Movie_Detail";
function App() {
return (
<div>
<Router>
<Popular_Movies/>
<Route path="/movie/:id" exact>
<Movie_Detail/>
</Route>
</Router>
</div>
);}
export default App;
Popular_Movie.js
import React from "react";
import {image_api} from "../../Services/Service";
import {Link} from "react-router-dom";
export let Popular_Movie = ({name, title, poster_path, vote_average}) => {
return (<div className='different_movie'>
<img src={image_api + poster_path} className='image'/>
<div className='bottom_different_movie'>
<h3> <Link to={`/movie/:id`}>{name} {title} {vote_average}</Link></h3>
</div>
</div>) }
Popular_Movies.js
import React, {useEffect, useState} from "react";
import {Popular_Movie} from "./Popular_Movie";
export let Popular_Movies = () => {
let popularMovieUrl = `https://api.themoviedb.org/3/tv/popular?api_key=e12a044061e5fe9077c7aee8a5165126&language=en-US&page=1`;
let fetchMovies = async () => {
let response = await fetch(popularMovieUrl)
let data = await response.json()
setPopularMovie(data.results)
}
useEffect(() => {
fetchMovies()
},[])
return (<div>
{popularMovie.length > 0 && popularMovie.map(movie => <Popular_Movie key={movie.id} {...movie}/>)}
</div>) }
Movie_Detail
import React, {useEffect, useState} from "react";
export let Movie_Detail = () => {
let movieUrl = 'https://api.themoviedb.org/3/tv/popular?api_key=e12a044061e5fe9077c7aee8a5165126&language=en-US&page=1'
let [differentMovie, setDifferentMovie] = useState([])
let fetchDifferentMovie = async () => {
let response = await fetch(movieUrl)
let data = await response.json()
setDifferentMovie(data.results)
}
useEffect(() => {
fetchDifferentMovie()
},[])
return (<div>
{differentMovie.title}
</div>)}

Answer 1

If you want to show movie list on / route, and movie details on /movie/:id you should have your router structured like this:
<Router>
... // put navigation component here
<Switch>
<Route path="/" exact>
<Popular_Movies/>
</Route>
<Route path="/movie/:id" exact>
<Movie_Detail/>
</Route>
</Switch>
</Router>
Inside Movie_Detail component you need to extract movie id by using the useParams hook
const { id } = useParams();
... // fetch movie details using `id`
It's important for you to understand how Switch operates. It's like you have if-else logic which shoud decide which component to render when certain path is matched. Please, read more on Basic Routing.
P.S. The reason you're seeing both popular movies and movie details underneath is because your Popular_Movies component call was not wrapped with <Route> which means that it should be always present/visible.