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

user_9718879 0
Viewed 223

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 ?

react-router-bootstrap react-router reactjs
1 Answers

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;
user_132906260
Related