React + WP REST APIで動的なURLを用いてコンテンツ表示（ルーティング）を行いたい。

実現したいこと

ReactとWP REST APIでWebアプリを作成しています。

WP REST APIから受け取ったwordpress(ローカル環境)のJsonデータにあるidをkeyとしてReact側で
componentDidMountを使ってデータをマッピングし、投稿一覧を作成しました。(Home.jsx)

この投稿一覧の中にある"Link"「view more」からそれぞれのIDと紐づいたコンテンツPostPage.jsxに
表示したいのですが、コンポーネントと紐付けたり、ルーティングさせる方法がわかりません。

現状、「view more」に設定したLinkをクリックすると「localhost:3000/post/65」などの
URLには切り替わります。

動的なURLを表示するにはどのようにすれば良いでしょうか?
ご教示のほどよろしくお願いいたします。

環境とディレクトリはこのようになっています。

環境とディレクトリ構成

react-create-app

react-router@5.2.0
react-router-dom@^5.2.0

　src
├─　componant
│ ├─ Home.jsx
│ ├─ Navbar.jsx
│ ├─ PostPage.jsx
│
├─　App.js

Home.jsx


import React from 'react';
import PostPage from './PostPage'; 


class Home extends React.Component {
    constructor(props) {
    super(props)
    this.state = {
        loading:false,
        posts: [],
        error:''
        };
    }
    async componentDidMount () {
        const response = await fetch('http://localhost:8888/admin/wordpress/wp-json/wp/v2/posts?_embed');
        const posts = await response.json();
        this.setState({
        posts: posts,  
        });
    }
    render() {
        return (
        <div>
            <div>
            <Container>
                <>
                <h2>投稿一覧</h2>
                </>
                    <Box>
                    {
                        this.state.posts.map(item => (
                            <Post key={item.id}>
                            <>
                            </>
                                <>
                                    <Thumbnail>
                                        <img src={ item.featured_image.src }  alt=""/>
                                    </Thumbnail>
                                </>
                                <PostContent>
                                    <div>
                                        <Tittle>
                                            {item.title.rendered}
                                        </Tittle>
                                    </div>
                                    <>
                                    {/* link　ここから個別ページにルーティングしたい */}
                                        <p><Link to={`/post/${item.id}`}>view more</Link></p>
                                    </>
                                
                            </PostContent>
                        </Post>
                        ))
                    }
                    </Box>
                <div>
                </div>
                </Container>
            </div>
            
        </div>
        )
    }
}
export default Home;

PostPage.jsx


import React from 'react';
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";


class PostPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading:false,
            posts: [],
            error:''
            };
        }
        async componentDidMount () {
            const response = await fetch('http://localhost:8888/admin/wordpress/wp-json/wp/v2/post?_embed');
            const posts = await response.json();
            this.setState({
            posts: posts,  
            });
        }
        render() {
            return (
            <div>
                <div>
                    <>
                    </>
                        {
                            this.state.posts.map(item => (
                                <div key={item.id}>

                                        <>
                        <div dangerouslySetInnerHTML={{ __html: item.content.rendered }}></div>  
                                        </>
    


                            </div>
                            ))
                        }
                        
    
                    <div>
                    </div>
                </div>
                
            </div>
            )
        }
}
export default PostPage;

App.js


mport React from 'react';
import './App.css';
import { Component } from 'react';
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";

// Call componant
import Home from "./componant/Home";
import Navbar from './componant/Navbar';
import PostPage from './componant/PostPage';



class App extends Component {  
  render(){
    return (
      <BrowserRouter>
        <div id="root">  
        <Navbar />
                <Route path="/" component={Home}></Route>
                <Route exact path="/post/:id" component={this.PostPage}></Route>

        </div>
      </BrowserRouter>

    )
    
  }
}


export default App;