react bootstrap navbar example

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;