ReactJS - Load different component when go to new page - reactjs

Question

Good evening to all. I am new to ReactJS and I do not understand how I can load different content per page and at the same time have some fixed sections such as the header ( after click a LINK ).
I have created three components and I render them to the homepage.When I click the about link I would like to load Header & Learn.js component ONLY. How can I manage that?
Thanks a lot!
index.js
import React from "react";
import ReactDOM from "react-dom";
import Header from './components/header'
import MiddleMan from './components/middleman'
import BottomHero from './components/bottomhero'
import './web.css';
function App(){
return (
<React.Fragment>
<Header />
<MiddleMan />
<BottomHero />
</React.Fragment>
);
}
ReactDOM.render(<App />, document.querySelector(".container"));
middleman.js
import React, { Component } from 'react';
import Learn from './learn';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
} from "react-router-dom";
class MiddleMan extends React.Component {
render() {
return (
<div className="middle JV--row JV--a--center JV--spacer">
<Router>
<ul>
<li><Link to="about">ABOUT ME</Link></li>
<li><Link to="project">PROJECTS</Link></li>
<li><Link to="exp">PR. LANGUAGES / TECHNOLOGIES</Link></li>
</ul>
<Routes>
<Route path="about" element={<Learn/>}></Route>
</Routes>
</Router>
</div>
);
}
}
export default MiddleMan;
learn.js
import React from 'react';
import Header from './header'
class Learn extends React.Component {
render(){
return (
<h2>BBBBBBBBBBBBBBBBBB</h2>
);
}
}
export default Learn;

Answer 1

Your app structure is a little weird considering how react-router-dom is meant to be used. I'd suggest you read their documentation!
Now, trying to give a more specific answer, you should wrap your App component in a BrowserRouter. Your routes could be inside a Switch component and to implement this Header behavior that you wish to achieve I suggest you check the answers to this question.