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

Question

所以我使用 react-router-bootstrap 中的 LinkContainer 组件从引导程序中包装我的 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 属性并将其值设置为react-router-dom 的Link 组件：

// 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 Navbar and Routing not working together

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 start 以在 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 之间似乎存在不兼容问题，或者设置它的正确方法已更改，我还没有看到有关如何设置的最新说明让他们一起工作。

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