react-router-bootstrap的LinkContainer报withRouter不是函数如何解决

错误原因 #

该报错是由react-router-dom v6的API变更导致：v6版本正式移除了v5中提供的withRouter高阶组件，而你当前使用的react-router-bootstrap版本为适配react-router v5的旧版本，底层仍然依赖已废弃的withRouter接口，因此调用时抛出类型错误。

解决方案 #

方案1（推荐）：升级适配v6的react-router-bootstrap版本 #

react-router-bootstrap从v1.0.0版本开始已经完整兼容react-router v6，直接升级依赖即可解决问题，原有代码无需修改：

• 执行安装命令：

npm install react-router-bootstrap@latest
# 或使用yarn
yarn add react-router-bootstrap@latest

方案2（仅用于无法升级依赖的特殊场景）：自定义withRouter兼容 #

如果项目存在依赖约束无法升级版本，可以手动实现withRouter高阶组件做兼容处理，在项目入口文件或者公共工具文件中添加如下代码：

import { useLocation, useNavigate, useParams } from "react-router-dom";

const withRouter = (Component) => {
  const WrappedComponent = (props) => {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} router={{ location, navigate, params }} />;
  };
  return WrappedComponent;
};

之后将该方法挂载到react-router-dom的导出对象上，即可让旧版本的react-router-bootstrap正常调用该接口。该方案属于临时hack，后续维护成本较高，不建议长期使用。

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