Get started with react-router-bootstrap CDN

Apache-2.0 licensed

React-router-bootstrap is a library that integrates Bootstrap components with React Router for creating navigable and responsive web applications.

Tags:
  • react
  • react-router
  • react-bootstrap

Stable version

Copied!

How to start using react-router-bootstrap CDN


import React from 'react';
import { BrowserRouter as Router, Route, Link, Navbar, Nav, Tab, Container } from 'react-router-bootstrap';

function App() {
  return (
    <Router>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand as={Link} to="/">Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link as={Link} to="/home">Home</Nav.Link>
            <Nav.Link as={Link} to="/about">About</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      <Container>
        <Tab.Container id="left-tabs-example" defaultActiveKey="first">
          <Nav variant="pills" className="flex-column">
            <Nav.Link eventKey="first">Home</Nav.Link>
            <Nav.Link eventKey="second">About</Nav.Link>
          </Nav>
          <Tab.Content>
            <Tab.Pane eventKey="first">
              <h1>Home</h1>
            </Tab.Pane>
            <Tab.Pane eventKey="second">
              <h1>About</h1>
            </Tab.Pane>
          </Tab.Content>
        </Tab.Container>
      </Container>

      <Route path="/home" exact component={() => <h1>Welcome to Home page</h1>} />
      <Route path="/about" component={() => <h1>Welcome to About page</h1>} />
    </Router>
  );
}

export default App;

All versions