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

admin管理员组

文章数量:1391937

So I am using the LinkContainer ponent from react-router-bootstrap to wrap my Nav.Link ponent 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]: .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-ponent instead.

Thank you in advance.

So I am using the LinkContainer ponent from react-router-bootstrap to wrap my Nav.Link ponent 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/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-ponent instead.

Thank you in advance.

• javascript
• reactjs
• react-router-dom
• react-bootstrap
• react-router-bootstrap

Share Improve this question Follow asked Nov 24, 2021 at 2:17 wizby_wizby_ 8311 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I have already resolved the problem.

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

// Here's the code snippet

/* instead of using react-router-bootstrap, we're just going to use the Link ponent 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 [email protected]

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

It seems there is an inpatibility 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.

It works when I updated to the latest react-router-bootstrap using this mand npm install react-router-bootstrap@latest

本文标签： javascriptIs there a solution for LinkContainer component from reactrouterbootstrap errorStack Overflow