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