React 路由器引导 LinkContainer 返回 TypeError: (0 , _reactRouterDom.withRouter) is not a function

Question

似乎自从最近的更新React 以来，与路由相关的所有内容都已更改。我曾经使用 react-router-bootstrap 中的 LinkContainer，但现在它正在抛出

TypeError: (0 , _reactRouterDom.withRouter) is not a function.

    import React from "react";
    import { Navbar, Container, Nav } from "react-bootstrap";
    import { LinkContainer } from "react-router-bootstrap";
    
    function Navbarr() {
      return (
        <Navbar bg="dark" variant="dark">
          <Container>
            <LinkContainer to="/">
              <Navbar.Brand>LOGO</Navbar.Brand>
            </LinkContainer>
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#features">Features</Nav.Link>
              <Nav.Link href="#pricing">Pricing</Nav.Link>
            </Nav>
          </Container>
        </Navbar>
      );
    }
    
    export default Navbarr;

我必须进行哪些更改才能使其正常工作？

Answer 1

react-router-bootstrap 似乎已经 3 年没有更新了，并且不再与 react-router-dom@v6 兼容。我敢打赌，如果你将你的 react-router-dom 回滚到 5.2 版，它就会工作。

另一个对我有用的解决方案，而不是使用 LinkContainer，您也可以使用带有 react-router-dom 的 Navbar.Brand 和 Nav.Link 组件的“as”属性。

示例：

import { Link } from "react-router-dom";

<Container>
     <Navbar.Brand as={Link} to='/'>LOGO</Navbar.Brand>
</Container>


export default Navbarr;