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,
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.