从react-router-dom导入useLocation提示未导出的问题咨询

问题根源 #

你当前安装的react-router-dom@5.0.1版本未提供useLocation导出，useLocation是react-router-dom v5.1.0版本才正式新增的Hooks API，低于该版本的v5分支包都没有内置这个方法，因此会触发导入报错。

解决方法 #

• 方案一：升级react-router-dom到v5.1.0及以上的v5稳定版本（无需调整现有React版本，也不会引入v6的破坏性变更），执行安装命令即可：

  # npm 安装
  npm install react-router-dom@5.3.4
  # yarn 安装
  yarn add react-router-dom@5.3.4
  

• 方案二：如果暂时无法升级依赖，可使用v5.0.1支持的withRouter高阶组件替代实现相同能力：

  import { withRouter } from "react-router-dom";
  
  function 你的业务组件(props) {
    // 从props中直接取location属性
    const location = props.location;
    // 原有业务逻辑不变
  }
  
  // 用withRouter包裹组件导出
  export default withRouter(你的业务组件);
  

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