React Router Bootstrap Integration

Common errors

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

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

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

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

Warnings

• breaking 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.
  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`.
• gotcha 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.
  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`.

Install

• npm install react-router-bootstrap npm
• yarn add react-router-bootstrap yarn
• pnpm add react-router-bootstrap pnpm

Imports

• LinkContainer
  wrong:

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

  correct:

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

  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.

Quickstart

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;