React router bootstrap LinkContainer returns TypeError: (0 , _reactRouterDom.withRouter) is not a function

Question

It seems like since the recent update React had, everything related to the routing has been changed. I used to use LinkContainer from react-router-bootstrap but it's now throwing

TypeError: (0 , _reactRouterDom.withRouter) is not a function.

    import React from "react";
    import { Navbar, Container, Nav } from "react-bootstrap";
    import { LinkContainer } from "react-router-bootstrap";
    
    function Navbarr() {
      return (
        <Navbar bg="dark" variant="dark">
          <Container>
            <LinkContainer to="/">
              <Navbar.Brand>LOGO</Navbar.Brand>
            </LinkContainer>
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#features">Features</Nav.Link>
              <Nav.Link href="#pricing">Pricing</Nav.Link>
            </Nav>
          </Container>
        </Navbar>
      );
    }
    
    export default Navbarr;

What changes do I have to make to get it to work ?

Answer 1

it appears react-router-bootstrap hasn't been updated in 3 years and is no longer compatible with react-router-dom@v6. I bet if you rolled back your react-router-dom to version 5.2 it will work.

Another solution that worked for me instead of using LinkContainer you could also just use the "as" attribute for the Navbar.Brand and Nav.Link components with react-router-dom.

exemple:

import { Link } from "react-router-dom";

<Container>
     <Navbar.Brand as={Link} to='/'>LOGO</Navbar.Brand>
</Container>


export default Navbarr;