{"id":11845,"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.","status":"active","version":"0.26.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-bootstrap/react-router-bootstrap","tags":["javascript","react","react-router","react-bootstrap"],"install":[{"cmd":"npm install react-router-bootstrap","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-bootstrap","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-bootstrap","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for all React components.","package":"react","optional":false},{"reason":"Peer dependency, providing the core routing functionality for React Router.","package":"react-router-dom","optional":false}],"imports":[{"note":"LinkContainer is the primary named export. The package is ESM-first in its modern versions; using CommonJS require() may lead to issues or suboptimal bundling.","wrong":"const LinkContainer = require('react-router-bootstrap').LinkContainer","symbol":"LinkContainer","correct":"import { LinkContainer } from 'react-router-bootstrap'"},{"note":"For TypeScript users, import prop types explicitly to ensure correct type checking and IntelliSense.","symbol":"LinkContainer (type)","correct":"import type { LinkContainerProps } from 'react-router-bootstrap'"}],"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`."},"warnings":[{"fix":"For React Router v6+, use `npm install react-router-bootstrap`. For React Router v4/v5, use `npm install react-router-bootstrap@rr-v4`. For v3, use `npm install react-router-bootstrap@rr-v3`.","message":"Version 0.26.0 introduced support for React Router v6. This change is not backwards compatible with React Router v4 or v5. Using `react-router-bootstrap` versions prior to 0.26.0 with React Router v6 will lead to runtime errors, and vice-versa.","severity":"breaking","affected_versions":">=0.26.0"},{"fix":"Ensure all required props are explicitly passed to `LinkContainer` or its children, or manage default values within your component logic directly if you were overriding `defaultProps`.","message":"The `LinkContainer` component no longer uses `defaultProps` as of version 0.26.3. While generally a good practice for modern React, this might affect applications relying on specific default prop behaviors or custom prop merging logic.","severity":"gotcha","affected_versions":">=0.26.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade your `react-router-dom` package to v6 or greater (e.g., `npm install react-router-dom@latest`). Alternatively, if you need to stick with React Router v5, install the compatible version of `react-router-bootstrap`: `npm install react-router-bootstrap@rr-v4`.","cause":"Using `react-router-bootstrap` v0.26.x (designed for React Router v6) with `react-router-dom` v5 or an older version.","error":"Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'route')]"},{"fix":"Ensure `LinkContainer` is imported as a named export: `import { LinkContainer } from 'react-router-bootstrap'`.","cause":"This typically occurs when `LinkContainer` is imported incorrectly, such as attempting a default import or a misnamed import.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Ensure the React-Bootstrap component is a direct child of `LinkContainer`, like `<LinkContainer to=\"/path\"><Button>Click Me</Button></LinkContainer>`. Also, verify that the `to` prop is correctly provided to `LinkContainer`.","cause":"The React-Bootstrap component is not correctly wrapped by `LinkContainer`, or `LinkContainer` is being misused (e.g., placing complex children inside that don't pass events up).","error":"React-Bootstrap component (e.g., Button, Nav.Link) does not navigate when clicked, but visually appears correct."}],"ecosystem":"npm"}