Html 添加了引导头，现在组件正在复制

我已经将引导中的导航条添加到React应用程序中，由于某些原因，当我渲染应用程序时，它正在复制。不知道发生了什么。下面的代码是我的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; 

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;

import React，{Component}来自'React'；
从“/Navbar.jsx”导入导航栏；
类HeaderName扩展组件{
render（）{
返回(
AquaStars的新网站。
)
}
}
导出默认HeaderName；

下面是Navbar.jsx组件

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; 

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;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
导入“/Navbar.css”；
类导航栏扩展组件{
render（）{
返回(








);
}
}
导出默认导航栏；

下面是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'));

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route}
从“./components/header”导入HeaderName；
从“./components/footer”导入页脚名称；
从“./components/descripp”导入描述符；
从“./components/intro”导入描述符名称；
//创建一个新组件。生成一些HTML。
//常量App=函数（）{
//欢迎回到Aquastars网站；
// }
常量应用=（）=>{
返回(
);
}
//将此组件生成的HTML放入
//在页面上（在DOM中）。
ReactDOM.render（，document.querySelector（'.container'）；

---

任何帮助都将不胜感激。

请确保您没有在

app.js/index.js

或导入

headerName

组件的任何位置渲染

Navbar

组件。你也可以发布这些文件吗？

Navbar

组件中的内容。需要更多的信息

-编辑-

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

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

---

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

您是否也可以共享

Navbar

组件？我想这就是问题所在。这在index.js

中，你能发布index.js吗？这段代码说明只有在根目录被命中时才会装入HeaderName组件。是的，所以您要呈现两次HeaderName。当根目录被点击时，以及在每个页面上，您都会特别地调用它，所以无论何时您在主页上，它都会呈现两次。我会用一个解决方案来编辑我的答案当然这不是问题，而且如果你想在每一页的页眉都应该去掉精确的路径线，并且不需要div包围路径。这怎么不是问题呢@维托马迪奥