(react) only url change but page is not reloaded - reactjs

Question

import { useEffect, useState } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Detail from "../components/Detail";
import Popular from "../components/Popular";
import Home from "../components/Home ";
import Trending from "../components/Trending";
import Upcoming from "../components/Upcoming";
import TopRated from "../components/TopRated";
import NowPlaying from "../components/NowPlaying";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/popular-mv" element={<Popular type="movie" />} />
<Route path="/trending-mv" element={<Trending type="movie" />} />
<Route path="/topRated-mv" element={<TopRated type="movie" />} />
<Route path="/upcoming-mv" element={<Upcoming type="movie" />} />
<Route path="/nowPlaying-mv" element={<NowPlaying type="movie" />} />
<Route path="/popular-tv" element={<Popular type="tv" />} />
<Route path="/trending-tv" element={<Trending type="tv" />} />
<Route path="/topRated-tv" element={<TopRated type="tv" />} />
<Route path="/nowPlaying-tv" element={<NowPlaying type="tv" />} />
<Route path="/detail/:id/:type" element={<Detail />} />
</Routes>
</Router>
);
}
export default App;
import { useState, useEffect } from "react";
import { useParams, Link, useLocation } from "react-router-dom";
function Detail() {
const type =
useLocation().pathname.split("/")[
useLocation().pathname.split("/").length - 1
];
const URL = `https://api.themoviedb.org/3/${type}/`;
const { id } = useParams();
const [details, setDetails] = useState([]);
const [similars, setSimilars] = useState([]);
const [genres, setGenres] = useState([]);
function detailFetch() {
fetch(`${URL}${id}?api_key=${API_KEY}`)
.then((result) => result.json())
.then((json) => {
setDetails(json);
setGenres(json.genres);
});
}
function similarFetch() {
fetch(`${URL}${id}/similar?api_key=${API_KEY}`)
.then((result) => result.json())
.then((json) => {
setSimilars(json.results);
});
}
useEffect(() => {
detailFetch();
similarFetch();
}, []);
return (
<div>
<img src={`https://image.tmdb.org/t/p/w500/${details.poster_path}`} />
<div>{details.title}</div>
<div>{details.vote_average}</div>
<div>{details.release_date}</div>
<div>{details.runtime}</div>
<div>
{genres.map((g) => (
<li key={g.id}>{g.name}</li>
))}
</div>
<p>{details.overview}</p>
<div>
{similars.map((s) => (
<a href={`/detail/${s.id}/${type}`} key={s.id}>
<img src={`https://image.tmdb.org/t/p/w500/${s.poster_path}`} />
</a>
))}
</div>
</div>
);
}
export default Detail;
I'm making movieApp using react.
but i have some problems about routing.
As i said at title, in movie information(detail) page, i made this page load when clicking movie poster and its similar movies. and then i cliked similar movie poster, i expected to reload the page.
Actially i solve this problem using not using .
But i have question why this is not working when i using
(i have other pages like tv list,movie list. but it only occurs in detail page.)
Thank You!