【React】コンポーネントの値（Jsonのid）を、画面遷移するURLの文字列として値を渡したい。

前提・実現したいこと

reactで映画のapi(JSON)を表示するアプリを作っています。

映画の一覧表示のコンポーネントから、映画詳細へ遷移する画面を実装しようとしており、
画面遷移する際にjsonのidを、映画詳細を表示するURLに文字列に加えたいです。

映画詳細の画面で叩くAPIはこちらになります。
※ api_keyは伏せさせて頂いております。

https://api.themoviedb.org/3/movie/${movieID}?api_key=xxxxxxxxxxxx&page=1

一覧で扱うJSONは以下のような構成になっています。
文字列${movieID}を下記のJSONにあるidと連携し、画面遷移を実現したいのですが
どのようにしたら解決出来ますでしょうか...？

javaScript
1{
2  "page": 1,
3  "results": [
4    {
5      "adult": false,
6      "backdrop_path": "/lOSdUkGQmbAl5JQ3QoHqBZUbZhC.jpg",
7      "genre_ids": [
8        53,
9        28,
10        878
11      ],
12      "id": 775996, //このidを${movieID}にして、映画詳細のURLにしたいのですが....
13      "original_language": "en",
14      "original_title": "Outside the Wire",
15      "overview": "",
16      "popularity": 3519.784,
17      "poster_path": "/e6SK2CAbO3ENy52UTzP3lv32peC.jpg",
18      "release_date": "2021-01-15",
19      "title": "Outside the Wire",
20      "video": false,
21      "vote_average": 6.5,
22      "vote_count": 473
23    },
24    {
25     // 上記と同様な構成で続きます。
26     },
27
28
29}

試したこと

一覧表示で表示させているJSONをfor文で回し、idを変数としてconsoleに表示させることは出来ました。

javaScript
1
2    for (let i = 0; i < movies.length; i++) {
3        const movieId = movies[i].id;
4        console.log(movieId) 
5    }
6

実行結果

該当のソースコード

親 : 一覧となるコンポーネント (PopularMovie.js)

javaScript
1const PopularMovie = () => {
2
3    const [movies , setMovies ] = useState([]);
4    const url = "https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxxxxxx&language=ja&page=1&include_adult=false";
5
6    useEffect(() => {
7        try {
8            fetch(url)
9            .then(( res => {
10                return( res.json() )
11            }))
12            .then(( data ) => {
13                setMovies(data.results)
14                console.log(movies)
15    
16            })
17        } catch(err) {
18            console.log(err)
19        }
20    }, []);
21
22    for (let i = 0; i < movies.length; i++) {
23        const movieId = movies[i].id;
24        console.log(movieId)
25
26    }
27
28
29
30
31    return (
32        <Inner>
33        <>
34            {movies.filter(movie => movie.poster_path).map(movie => (
35                <li key={movie.id}>
36
37                    <>
38                    <Link to={'/movie/' + movie.id}>
39                    <img 
40                        src={`https://image.tmdb.org/t/p/w342/${movie.poster_path}`}
41                        alt={movie.title + ' poster'}
42                        />
43                    <div className="movieTitle">
44                        <p>
45                            {movie.original_title}
46                        </p>
47                    </div>
48                    </Link>
49                    </>
50                </li>
51            ))} 
52        </>
53
54        </Inner>
55    )
56}
57export default PopularMovie;
58

子 : 詳細画面となるコンポーネント (ViewMore.js)

javaScript
1function ViewMore() {
2    const [data, setData] = useState(null);
3    // ここに、${movieID}を定義できれば...
4
5
6    useEffect( () => {
7        async function fetchData() {
8            const response = await fetch(`https://api.themoviedb.org/3/movie/${movieID}?api_key=xxxxxxxxxxxx&page=1`);
9            const jsonData = await response.json()
10            setData(jsonData)
11            console.log(jsonData)
12        }
13        fetchData();
14    },[])
15
16
17    return (
18        <>
19            {data && (
20            <>
21            <p>{data.original_title}</p>
22            <div>
23                <img 
24                        src={`https://image.tmdb.org/t/p/w342/${data.poster_path}`}
25                        alt={data.title + ' poster'}
26                />
27            </div>
28
29            </>
30            )}
31        </>
32    )
33}
34export default ViewMore;

ルーティング (App.js)

javaScriot
1
2      <BrowserRouter>
3        <Switch>
4        <AppContainer>
5              <Route exact path="/" component={PopularMovie} />
6              <Route path="/movie/:movie_id" component={ViewMore} />
7        </AppContainer>
8        </Switch>
9      </BrowserRouter>
10