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
0.10.0
0.11.0
0.12.0
0.12.1
0.13.0
0.13.1
0.13.2
0.13.3
0.13.4
0.13.5
0.13.6
0.14.0
0.15.0
0.16.0
0.17.0
0.17.1
0.17.2
0.18.0
0.18.1
0.19.0
0.19.1
0.19.2
0.19.3
0.20.0
0.20.1
0.21.0
0.22.0
0.22.1
0.23.0
0.23.1
0.23.2
0.23.3
0.24.1
0.24.2
0.24.3
0.24.4
0.25.0
0.26.0
0.26.0-beta.0
0.26.0-beta.1
0.26.0-beta.2
0.26.1
0.26.2
*** 0.26.3
0.8.3
0.9.0
0.9.1