react router dom でページ遷移をする方法

Header.jsでライブラリを呼んで、main.js内でh3タグの名前をProfile.jsを呼んで表示したいんですが
どうもうまくいきません、、(今は文字列として”プロフィール”にしています)
どなたかご教授してただけないでしょうか？？

components
--App.js
--Header.js
--Main.js
--Profile.js

App.js

react
1import React from 'react';
2import Header from './Header';
3import Main from './Main';
4import Footer from './Footer';
5
6class App extends React.Component {
7  render() {
8    return (
9      <div>
10        <Header />
11        <Main />
12        <Footer />
13      </div>
14    );
15  }
16}
17
18export default App;

Header.js

react
1import React from 'react';
2import logo from '../assets/img/character_logo.svg';
3import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
4
5function Home() {
6  return <h2>Home</h2>;
7}
8function About() {
9  return <h2>About</h2>;
10}
11function Profile() {
12  return <h2>Profile</h2>;
13}
14function Contact() {
15  return <h2>Contact</h2>;
16}
17
18class Header extends React.Component {
19  render() {
20    return (
21      <Router>
22      <header>
23        <nav>
24          <div className='header flex'>
25            <div className='header-logo'>
26              <img src={logo} alt='logo' />
27            </div>
28            <div className='menu'>
29              <ul className='flex'>
30                <Link to='/'>Home</Link>
31                <Link to='/about'>About</Link>
32                <Link to='/profile'>Profile</Link>
33                <Link to='/contact'>Contact</Link>
34              </ul>
35            </div>
36          </div>
37        </nav>
38      </header>
39      </Router>
40    );
41  }
42}
43
44export default Header;
45

Main.js

react
1import React from 'react';
2import Profile from './Profile';
3import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
4
5class Main extends React.Component {
6  render() {
7    return (
8      <Router>
9        <div className='main-wrapper'>
10          <div className='main'>
11            <Switch>
12              <Route path='/profile'>
13                <Profile />
14              </Route>
15            </Switch>
16            <div className='copy-container'>
17              <h1>あああ</h1>
18              <h2>aaaaaaaaaaaaaa</h2>
19            </div>
20            <div className='lesson-container'>
21              <h3>プロフィール</h3>
22            </div>
23          </div>
24        </div>
25      </Router>
26    );
27  }
28}
29
30export default Main;
31

--
Profile.js

react
1import React from 'react';
2
3class Profile extends React.Component {
4  render() {
5    return (
6       <h2>Profile</h2>
7    );
8  }
9}
10
11export default Profile;
12