Registry / web-framework / react-router-bootstrap

react-router-bootstrap

library0.26.3jsnpmunverified

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.

web-framework

npm install react-router-bootstrap

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ROUTER-BOOTS

react-router-bootstrap

web-frameworkjavascriptv0.26.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

LinkContainer

✓ import { LinkContainer } from 'react-router-bootstrap'

✗ const LinkContainer = require('react-router-bootstrap').LinkContainer

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.

LinkContainer (type)

✓ import type { LinkContainerProps } from 'react-router-bootstrap'

For TypeScript users, import prop types explicitly to ensure correct type checking and IntelliSense.

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`.

import React from 'react'; import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom'; import { LinkContainer } from 'react-router-bootstrap'; import { Button, Nav, Navbar, Container } from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; const HomePage = () => <h2>Home Page Content</h2>; const AboutPage = () => <h2>About Us Content</h2>; const ContactPage = () => <h2>Contact Info Content</h2>; const DashboardPage = () => <h2>Dashboard (Protected Route)</h2>; const App = () => ( <BrowserRouter> <Navbar bg="dark" variant="dark" expand="lg" className="mb-3"> <Container> <Navbar.Brand href="#">My React App</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="me-auto"> <LinkContainer to="/"> <Nav.Link>Home</Nav.Link> </LinkContainer> <LinkContainer to="/about"> <Nav.Link>About</Nav.Link> </LinkContainer> <LinkContainer to="/contact"> <Nav.Link>Contact</Nav.Link> </LinkContainer> </Nav> <LinkContainer to="/dashboard"> <Button variant="outline-info">Dashboard</Button> </LinkContainer> </Navbar.Collapse> </Container> </Navbar> <Container> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/about" element={<AboutPage />} /> <Route path="/contact" element={<ContactPage />} /> <Route path="/dashboard" element={<DashboardPage />} /> <Route path="*" element={<h2>404 Not Found</h2>} /> </Routes> </Container> </BrowserRouter> ); export default App;

Debug

Known issues

breakingVersion 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.

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`.

affects: >=0.26.0

gotchaThe `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.

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`.

affects: >=0.26.3

Errors

Common errors & fixes

Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'route')]

Using `react-router-bootstrap` v0.26.x (designed for React Router v6) with `react-router-dom` v5 or an older version.

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`.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This typically occurs when `LinkContainer` is imported incorrectly, such as attempting a default import or a misnamed import.

fix

Ensure `LinkContainer` is imported as a named export: `import { LinkContainer } from 'react-router-bootstrap'`.

React-Bootstrap component (e.g., Button, Nav.Link) does not navigate when clicked, but visually appears correct.

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).

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`.

Upgrade

Version history

0.26.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for all React components.

react-router-domrequiredPeer dependency, providing the core routing functionality for React Router.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-bootstrap/react-router-bootstrap ↗

packagehttps://www.npmjs.com/package/react-router-bootstrap ↗

homepagehttps://reactrouterbootstrap.com ↗