React router the page won't stop reloading - reactjs

Question

building simple react website for practice and trying to add routes so my menu will work.
I tried a few ways and looked a lot in stackoverflow didn't find working solution for my problem.
I'm not sure where to place the Router should i put it where my navbar located or in the index where i render the App?. No matter what i tried it's just getting stuck in reloading mode.
This is my latest try: i try to replace the bootstrap menu links with Link> as it looks here:
Link
still the same result stuck on reloading
The Header code where the menu code is:
function Header(props) {
return (
<header>
<div className="container">
<nav class="navbar navbar-expand-md navbar-light">
<div class="mx-auto order-0">
<a
className="brand-stype"
className="navbar-brand mx-auto"
href="/"
>
home
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target=".dual-collapse2"
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<NavItem eventKey={1} href="/">
<NavLink exact activeClassName="active" to="/about">
about
</NavLink>
</NavItem>
</ul>
</div>
</nav>
</div>
</header>
);
}
My App.js code
const App = () => {
return (
<div>
<div className="all-containers">
<Header />
<Photos />
</div>
<HowItWorks />
<Calc />
<Insta />
<Footer />
<Switch>
<Route exact path='/' component={App} />
<Route exact path='/about' component={About} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
);
};
export default App;
My index.js file
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
);
The error i got after adding Router as said in the comment below:

Answer 1

You should put your router and the top lvl:
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
It just injects necessary things using context so you can freely use router anywhere in your application.