添加了Bootstrap标头，现在该组件正在重复

Question

我已经从Bootstrap添加了一个Navbar到React App，出于某种原因，当我渲染应用程序时它会重复。不确定发生了什么。下面的代码是我的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; 

下面是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组件内部。需要更多信息。

-编辑-

您可以创建一个新的组件，将任何页面内容引入“页面组件”，然后在渲染中：

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

这将确保页眉和页脚在每个页面上呈现，但仅在路由更改时呈现某些内容。干杯。