react-bootstrap 导航栏无法在 React js 中正确呈现

Question

I am using bootstrap 4 with reactjs. Using react-bootstrap module, trying to render the Navbar , but somehow , it is not rendering properly. i am using bootstrap 4 syntax in the code but not sure whether any module/lib is using any bootstrap syntax 3

here is the code (App.js) :

import React, { Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';

import News from './Components/pages/News';

import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';

class App extends Component {
  render() {
    return (

      <Router>
      <div className="App">
      <Navbar />
      <Route exact path="/" component={Homepage} />
      <Route path="/about" component={About} />
      <Route path="/news" component={News} />
      </div>
      </Router>
    );
  }
}


export default App;

and the navbar.js :

import React, { Component } from 'react';
import ReactBootstrap, { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';

class CustNavbar extends Component {
render() {
  return (

<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
  <Link to="/">CodeLife</Link>
</Navbar.Brand>
<Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} componentClass={Link} to="/">
Home
</NavItem>

<NavItem eventKey={2} componentClass={Link} to="/about">
About
</NavItem>
<NavItem eventKey={3} componentClass={Link} to="/news">
News
</NavItem>
</Nav>

</Navbar.Collapse>

</Navbar>

)
}
}

export default CustNavbar;

what is happening

now the issue, there is no any compilation error , but somehow , Navigation bar is not rendering properly. Not sure whether the issue with version syntax or the implementation itself. please suggest

what is expected

Navigation bar should appear in the homepage before Grid/container

EDIT 1: I have modified the code as suggested . please below :

App.js

import React, { Fragment, Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import CorporateTraining from './Components/pages/corporateTraining';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';

import News from './Components/pages/News';

import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';

class App extends Component {
  render() {
    return (
    <Fragment>
    <Navbar />
      <div className="App">
      <Router>
      <Route exact path="/" component={Homepage} />
      <Route path="/about" component={About} />
      <Route path="/news" component={News} />

      </Router>
      </div>
      </Fragment>
    );
  }
}


export default App;

Regards,

Answer 1

I'm not really sure as its too unclear. But try moving your navbar on top of router as i assume that className App have styling in them. Let me know

import React, { Fragment, Component } from 'react';
        ...

        return (
             <Fragment>
                  <Navbar />
                  <div className="App">
                    <Router>
                    <Switch>
                      <Route exact path="/" component={Homepage} />
                      <Route path="/about" component={About} />
                      <Route path="/news" component={News} />
                    </Switch
                    </Router>
                  </div>
          </Fragment>
    )

Don't forget to add Fragment