1import { Route, RouteHandler, Link } from 'react-router';
2import AuthService from '../services/AuthService'
3import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
4import { LinkContainer } from 'react-router-bootstrap';
5
6/// In the render() method
7<Nav pullRight>
8 <LinkContainer to="/home">
9 <NavItem eventKey={1}>Home</NavItem>
10 </LinkContainer>
11 <LinkContainer to="/book">
12 <NavItem eventKey={2}>Book Inv</NavItem>
13 </LinkContainer>
14 <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
15 <LinkContainer to="/logout">
16 <MenuItem eventKey={3.1}>Logout</MenuItem>
17 </LinkContainer>
18 </NavDropdown>
19</Nav>
20
1import React from 'react'
2import {
3 BrowserRouter as Router,
4 Switch,
5 Route,
6 useParams,
7 } from "react-router-dom";
8 import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from 'react-bootstrap'
9 import Home from './Home';
10 import AboutUs from './AboutUs';
11 import ContactUs from './ContactUs';
12
13class BootstrapNavbar extends React.Component{
14
15 render(){
16 return(
17 <div>
18 <div className="row">
19 <div className="col-md-12">
20 <Router>
21 <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
22 <Navbar.Brand href="#home">React Bootstrap Navbar</Navbar.Brand>
23 <Navbar.Toggle aria-controls="basic-navbar-nav" />
24 <Navbar.Collapse id="basic-navbar-nav">
25 <Nav className="mr-auto">
26 <Nav.Link href="/">Home</Nav.Link>
27 <Nav.Link href="/about-us">Contact Us</Nav.Link>
28 <Nav.Link href="/contact-us">About Us</Nav.Link>
29 <NavDropdown title="Dropdown" id="basic-nav-dropdown">
30 <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
31 <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
32 <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
33 <NavDropdown.Divider />
34 <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
35 </NavDropdown>
36 </Nav>
37 <Form inline>
38 <FormControl type="text" placeholder="Search" className="mr-sm-2" />
39 <Button variant="outline-success">Search</Button>
40 </Form>
41 </Navbar.Collapse>
42 </Navbar>
43 <br />
44 <Switch>
45 <Route exact path="/">
46 <Home />
47 </Route>
48 <Route path="/about-us">
49 <AboutUs />
50 </Route>
51 <Route path="/contact-us">
52 <ContactUs />
53 </Route>
54 </Switch>
55 </Router>
56 </div>
57 </div>
58 </div>
59 )
60 }
61}
62
63export default BootstrapNavbar;