使用use-react-router库时遇TypeError: use_force_update_1.default is not a function错误求助

错误原因 #

• use-react-router是已停止维护的第三方库（最后更新于2019年），它内部依赖的use-force-update库的导入逻辑，在现代React/模块打包环境下存在兼容性问题。
• 你的项目使用React 18 + React Router 5，而use-react-router@1.0.7未适配这些较新的依赖版本，导致模块导入时无法正确识别use-force-update的默认导出，触发该错误。

解决方法 #

方法一：改用React Router官方钩子（推荐） #

React Router 5已内置对应功能的钩子，完全无需依赖第三方库：

• 用useHistory替代useReactRouter()返回的history
• 用useLocation替代location
• 用useRouteMatch替代match

修改Home.tsx代码：

import React from "react";
import { useHistory, useLocation, useRouteMatch } from "react-router-dom";

const Home = () => {
  const history = useHistory();
  const location = useLocation();
  const match = useRouteMatch();
  
  return <div>My location is {location.pathname}!</div>;
};

export default Home;

方法二：临时修复依赖兼容性（不推荐） #

如果坚持使用use-react-router，可以锁定use-force-update的版本到该库依赖的旧版本：

1. 卸载现有版本：

npm uninstall use-force-update

2. 安装指定版本：

npm install use-force-update@1.0.0

注：此方法仅为临时修复，由于use-react-router已停止维护，后续仍可能出现其他兼容性问题。

另外，你的App.tsx中store未定义，需确保已正确导入并创建Redux store，否则后续会触发新的错误。

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