Is there a solution for LinkContainer component from react-router-bootstrap error?

Question

So I am using the LinkContainer component from react-router-bootstrap to wrap my Nav.Link component from bootstrap. Please refer to the picture below for reference.

// Snippet
import {LinkContainer} from "react-router-bootstrap";

// Snippet

              <LinkContainer to="/cart">
                <Nav.Link class="navlink">
                  <FaShoppingCart /> Cart
                </Nav.Link>
              </LinkContainer>

// Snippet

But I am getting this error with my code: [Error Photo][1] [1]: https://i.stack.imgur.com/AF41y.png

By the way, I am using React v.17.0.2 and React-Router-Bootstrap v.0.25.0

I would like to ask if anyone can help or should I just change my version of my react-router-bootstrap or even use a react-router-component instead.

Thank you in advance.

score 5 · Accepted Answer · edited Nov 24 '21 at 04:07

I have already resolved the problem.

Instead of using a LinkContainer component from react-router-bootstrap, I just used the as property inside the <Nav.Link> and set its value as the Link component of react-router-dom:

// Here's the code snippet

/* instead of using react-router-bootstrap, we're just going to use the Link component from the react-router-dom */

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

function Header () {
return(
<Nav.Link as={Link} to="/path">children</Nav.Link>
);
}

export Header

I used the answer from this question for reference: ReactJS Bootstrap Navbar and Routing not working together

score 0 · Answer 2 · answered Nov 24 '21 at 18:42

I also have issues with LinkContainer wrapping a Nav.Link as follows:

<Navbar.Collapse id='basic-navbar-nav'>
    <Nav className='me-auto'>
         <LinkContainer to='/'>
               <Nav.Link>Home</Nav.Link>
          </LinkContainer>

I'm using this dependencies:

 "react-bootstrap": "^2.0.2",
        "react-dom": "^17.0.2",
        "react-router-bootstrap": "^0.25.0",
        "react-router-dom": "^6.0.2",
        "react-scripts": "4.0.3"

I'm getting this error when running npm start to see my website in Chrome browser:

TypeError: (0 , _reactRouterDom.withRouter) is not a function ./node_modules/react-router-bootstrap/lib/LinkContainer.js

S:/Kuarsis/webapps/kuarsis/frontend/node_modules/react-router-bootstrap/lib/LinkContainer.js:155
  152 |   strict: false,
  153 |   activeClassName: 'active'
  154 | };
> 155 | exports.default = (0, _reactRouterDom.withRouter)(LinkContainer);

Since I have the LinkContainer on another older project, which is using react-router-dom 5.0.0, instead of the 6.0.2, I uninstalled the 6.0.2 with

npm uninstall react-router-dom

And then installed the 5.0.0 version with:

npm i react-router-dom@5.0.0

That fixed the LinkContainer issue and the webpage worked just fine.

It seems there is an incompatibility issue between react-router-bootstrap and the latest version of react-router-dom 6.0.2, or the proper way of setting it up has changed and I have not seen latest instructions on how to make them work together.

Hope this helps, and if somebody else has more insights on how to make 6.0.2 work without rolling back to version 5.0.0 of react-router-dom, please let us know.

Instead of using LinkContainer from bootstrap I used the Link component from react router dom then utilized the as property from bootstrap navlink components. You can check the answer that I posted for more information. — wizby_, Nov 29 '21 at 11:07

Is there a solution for LinkContainer component from react-router-bootstrap error?

2 Answers2