LinkContainer组件react-router-bootstrap错误有解决方案吗？

Question

所以我使用react-router-bootstrap中的LinkContainer组件来包装bootstrap中的Nav.Link组件。请参考下图。

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

// Snippet

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

// Snippet

但是我的代码出现此错误： [错误照片][1] [1]：https://i.sstatic.net/AF41y.png

顺便说一句，我正在使用 React v.17.0.2 和 React-Router-Bootstrap v.0.25.0

我想问是否有人可以提供帮助，或者我应该更改我的react-router-bootstrap版本，甚至使用react-router-component来代替。

提前谢谢您。

Answer 1

我已经解决了问题。

我没有使用

LinkContainer

中的

react-router-bootstrap

组件，而是使用

as

内部的

<Nav.Link>

属性，并将其值设置为

Link

的

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

我参考了这个问题的答案： ReactJS Bootstrap 导航栏和路由不能一起工作

Answer 2

我也遇到了 LinkContainer 包装 Nav.Link 的问题，如下所示：

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

我正在使用这个依赖项：

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

在 Chrome 浏览器中运行 npm start 查看我的网站时遇到此错误：

TypeError: (0, _reactRouterDom.withRouter) 不是一个函数 ./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);

由于我在另一个较旧的项目上有 LinkContainer，该项目使用的是 React-router-dom 5.0.0，而不是 6.0.2，因此我使用

卸载了 6.0.2

npm uninstall react-router-dom

然后安装 5.0.0 版本：

npm i [email protected]

这解决了 LinkContainer 问题，网页工作得很好。

react-router-bootstrap和最新版本的react-router-dom 6.0.2之间似乎存在不兼容问题，或者正确的设置方法已经改变，我还没有看到如何制作它们的最新说明一起努力。

希望这会有所帮助，如果其他人对如何使 6.0.2 工作而不回滚到 React-router-dom 5.0.0 版本有更多见解，请告诉我们。

Answer 3

当我使用此命令更新到最新的react-router-bootstrap时它就可以工作了

npm install react-router-bootstrap@latest