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.stack.imgur.com/AF41y.png

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

我想问问是否有人可以提供帮助，或者我应该只更改我的 react-router-bootstrap 版本，还是改用 react-router-component。

提前致谢。

Answer 1

我已经解决了问题

我没有使用 react-router-bootstrap 中的 LinkContainer 组件，而是使用 <Nav.Link> 中的 as 属性并将其值设置为 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

我参考了这个问题的答案：

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"

当运行 npm 开始在 Chrome 浏览器中查看我的网站时出现此错误：

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);

因为我在另一个使用 react-router-dom 5.0.0 而不是 6.0.2 的旧项目上有 LinkContainer，所以我用

卸载了 6.0.2

npm uninstall react-router-dom

然后安装 5.0.0 版本：

npm i react-router-dom@5.0.0

这解决了 LinkContainer 问题，网页工作正常。

react-router-bootstrap 和react-router-dom 6.0.2 的最新版本似乎存在不兼容问题，或者正确的设置方式发生了变化我还没有看到有关如何使它们协同工作的最新说明。

希望这有帮助，如果其他人对如何在不回滚到 react-router-dom 5.0.0 版的情况下使 6.0.2 工作有更多见解，请告诉我们。

LinkContainer 组件是否有 react-router-bootstrap 错误的解决方案？

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

javascript

reactjs

react-bootstrap

react-router-dom

react-router-bootstrap