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

Posted 2023-02-22

【中文标题】是否有针对 react-router-bootstrap 错误的 LinkContainer 组件的解决方案？

【英文标题】：Is there a solution for LinkContainer component from react-router-bootstrap error?

【发布时间】：2022-01-02 11:39:21

【问题描述】：

所以我使用 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。

提前谢谢你。

【参考方案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

【参考方案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 版本有更多见解，请告诉我们。

【讨论】：

谢谢 Silverio

我没有使用引导程序中的 LinkContainer，而是使用了 react router dom 中的 Link 组件，然后使用了引导程序 navlink 组件中的 as 属性。您可以查看我发布的答案以获取更多信息。