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.sstatic.net/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.

Answer 1

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