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组件内部的内容。需要更多信息。

-编辑-

您可以创建一个新的Component，将所有页面内容引入“页面组件”，然后再呈现到渲染器中。

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

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

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

1 个答案: