Added Bootstrap header and now the component is duplicating - html

Question

I have added a Navbar from Bootstrap to a React App and for some reason, it is duplicating when I render the app. Not sure what is happening. Here is the code from below is my headercomponent.
import React, { Component } from 'react';
import Navbar from './Navbar.jsx';
class HeaderName extends Component {
render() {
return (
<div>
<div>
<Navbar />
</div>
<h1>The AquaStars New Website.</h1>
<img src="../public/images/picture_swimmers.png" />
</div>
)
}
}
export default HeaderName;
Below is the Navbar.jsx component.
import React,{ Component } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a className="navbar-brand" href="#">Top navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
);
}
}
export default Navbar;
Below is the index.js. This is where I think the problem is.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import HeaderName from './components/header';
import FooterName from './components/footer';
import DescripTitle from './components/descrip';
import DescripName from './components/intro';
//create a new componet. Produce some HTML.
// const App = function() {
// return <div>Welcome to Aquastars Website</div>;
// }
const App = () => {
return (
<div>
<Router>
<div>
<Route exact path="/" component={HeaderName}/>
</div>
</Router>
<HeaderName />
<DescripName />
<DescripTitle />
<FooterName />
</div>
);
}
//Take this component's generated HTML and put it
// on the page(in the DOM).
ReactDOM.render(<App />, document.querySelector('.container'));
Any help would be appreciated.

Answer 1

Make sure you are not rendering the Navbar component in your app.js/index.js or wherever the headerName component is being imported. Can you post these files as well? What is inside the Navbar component. More information is needed.
-EDIT-
You can make a new Component that brings In any page contents into a "page component" then in your render:
<HeaderName/>
<Router exact path="/somedirectory" component{yourPageComponent}/>
<FooterName/>
This will make sure that header and footer are rendered on every page but only certain content is rendered on route changes. Cheers.