react-bootstrap Navbar not rendering properly in 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,

crrmacarse · Accepted Answer · 2020-01-28 06:16:17Z

3

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

edited Jan 28, 2020 at 6:16

answered Jan 27, 2020 at 13:20

crrmacarse

1,2461 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2315104 Over a year ago

Thanks. I added as you instructed but no change .. still same issue. see above the edit. please suggest

user2315104 Over a year ago

further , i did not get when you say , ClassName App will have styling in them .. what is that ?

crrmacarse Over a year ago

Hi sorry, for the late reply. the question is kinda confusing. I added <Switch> above which should toggle components(read here reacttraining.com/react-router/web/api/Switch). With regards to "className App", I assume you had styling in them that could lead to your styling problem.

user2315104 Over a year ago

Thanks. I imported the Switch module and added the <Switch> tag, still the same issue. With regards to "className App", i do not have any styling as such. there is no any file called App.css in my project. could you please tell me which styling i have to import ? This may be a issue with something due to missing 'css' file ? please suggest

crrmacarse Over a year ago

I don't know exactly the issue as its too vague. Can you reproduce it in a sandbox or link to the repo?

Collectives™ on Stack Overflow

react-bootstrap Navbar not rendering properly in React js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related