React路由更新后react-router-bootstrap的LinkContainer报withRouter不是函数如何修复？

• 你当前使用的react-router版本为v6及以上，该版本已彻底移除旧版本提供的withRouter高阶组件
• 你安装的react-router-bootstrap版本未适配react-router v6，底层仍在调用已被删除的withRouter方法，因此触发类型错误

可根据项目实际情况选择以下任意一种方案：

方案1：升级适配版本（推荐） #

直接安装适配react-router v6的react-router-bootstrap版本，执行对应包管理工具的命令即可：

# npm
npm install react-router-bootstrap@latest
# yarn
yarn add react-router-bootstrap@latest
# pnpm
pnpm add react-router-bootstrap@latest

升级完成后现有业务代码无需任何修改即可正常运行。

方案2：手动替换实现（不想升级依赖的场景） #

如果不想调整依赖版本，可以直接用react-router v6原生的Link组件配合react-bootstrap的as属性实现相同效果，修改后的代码如下：

import React from "react";
import { Navbar, Container, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";

function Navbarr() {
  return (
    <Navbar bg="dark" variant="dark">
      <Container>
        <Navbar.Brand as={Link} to="/">LOGO</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link as={Link} to="/home">Home</Nav.Link>
          <Nav.Link as={Link} to="/features">Features</Nav.Link>
          <Nav.Link as={Link} to="/pricing">Pricing</Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  );
}

export default Navbarr;

注意：原有的href属性要替换为react-router的to属性，才会走前端路由逻辑，不会触发整页刷新。

内容的提问来源于stack exchange，提问作者Laspeed