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

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

我已经解决了这个问题。

我没有使用LinkContainer中的组件，而是使用中的属性并将其值设置为的组件：react-router-bootstrapas<Nav.Link>Linkreact-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 Navbar and Routing not work Together