{"library":"react-router-bootstrap","title":"React Router Bootstrap Integration","description":"This package provides seamless integration between React Router (specifically v6 and above in its current stable branch) and React-Bootstrap components. It allows developers to wrap standard React-Bootstrap elements like `Button`, `Nav.Link`, or `Dropdown.Item` within a `<LinkContainer>` component, effectively transforming them into functional navigation links that leverage React Router's routing capabilities. The current stable version is 0.26.3, with recent updates primarily focusing on bug fixes, indicating an active maintenance status. Its key utility is simplifying the process of creating navigable UI components from the React-Bootstrap library without the need for manual `onClick` event handling or direct `history` manipulation. It maintains separate installation paths and branches for compatibility with older React Router versions (v3, v4/v5), underscoring a critical version-based divergence for users to be aware of.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-router-bootstrap"],"cli":null},"imports":["import { LinkContainer } from 'react-router-bootstrap'","import type { LinkContainerProps } from 'react-router-bootstrap'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';\nimport { LinkContainer } from 'react-router-bootstrap';\nimport { Button, Nav, Navbar, Container } from 'react-bootstrap';\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\nconst HomePage = () => <h2>Home Page Content</h2>;\nconst AboutPage = () => <h2>About Us Content</h2>;\nconst ContactPage = () => <h2>Contact Info Content</h2>;\nconst DashboardPage = () => <h2>Dashboard (Protected Route)</h2>;\n\nconst App = () => (\n  <BrowserRouter>\n    <Navbar bg=\"dark\" variant=\"dark\" expand=\"lg\" className=\"mb-3\">\n      <Container>\n        <Navbar.Brand href=\"#\">My React App</Navbar.Brand>\n        <Navbar.Toggle aria-controls=\"basic-navbar-nav\" />\n        <Navbar.Collapse id=\"basic-navbar-nav\">\n          <Nav className=\"me-auto\">\n            <LinkContainer to=\"/\">\n              <Nav.Link>Home</Nav.Link>\n            </LinkContainer>\n            <LinkContainer to=\"/about\">\n              <Nav.Link>About</Nav.Link>\n            </LinkContainer>\n            <LinkContainer to=\"/contact\">\n              <Nav.Link>Contact</Nav.Link>\n            </LinkContainer>\n          </Nav>\n          <LinkContainer to=\"/dashboard\">\n            <Button variant=\"outline-info\">Dashboard</Button>\n          </LinkContainer>\n        </Navbar.Collapse>\n      </Container>\n    </Navbar>\n\n    <Container>\n      <Routes>\n        <Route path=\"/\" element={<HomePage />} />\n        <Route path=\"/about\" element={<AboutPage />} />\n        <Route path=\"/contact\" element={<ContactPage />} />\n        <Route path=\"/dashboard\" element={<DashboardPage />} />\n        <Route path=\"*\" element={<h2>404 Not Found</h2>} />\n      </Routes>\n    </Container>\n  </BrowserRouter>\n);\n\nexport default App;","lang":"typescript","description":"This example demonstrates how to integrate `react-router-bootstrap` with React Router v6 and React-Bootstrap components. It sets up a basic `Navbar` with navigation links using `<LinkContainer>` to route to different pages within a `BrowserRouter`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}