Добавлен заголовок Bootstrap и теперь компонент дублируется

Question

Я добавил Navbar из Bootstrap в приложение React и по какой-то причине он дублируется при рендеринге приложения. Не уверен, что происходит. Вот код снизу - мой заголовочный компонент.

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; 

Ниже представлен компонент Navbar.jsx.

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;

Ниже приведен index.js. Вот где я думаю, что проблема в этом.

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'));

Любая помощь будет оценена.

Answer 1

Убедитесь, что вы не визуализируете компонент Navbar в вашем app.js/index.js или куда-либо импортируемый компонент headerName. Можете ли вы также опубликовать эти файлы? Что находится внутри Navbar компонента. Требуется больше информации.

-EDIT-

Вы можете создать новый Компонент, который переносит любое содержимое страницы в «компонент страницы», а затем в ваш рендер:

    <HeaderName/>
    <Router exact path="/somedirectory" component{yourPageComponent}/>
    <FooterName/>

Это обеспечит отображение верхнего и нижнего колонтитула на каждой странице, но при изменении маршрута отображается только определенное содержимое. Приветствия.