如何解决history相关的TypeError: default is not a function错误？

错误信息 #

TypeError: (0 , history_history__WEBPACK_IMPORTED_MODULE_6_.default) is not a function

我的history.js文件内容 #

import { createBrowserHistory } from 'history';
export default createBrowserHistory({
    forceRefresh: true
});

组件中history的使用方式 #

<Button
  color="info"
  onClick={() => {
    console.log(userDeleted);
    history("/associated", {
      state: {
        devices: userDeleted.devices,
        email: userDeleted.email
      }
    });
  }}
  sx={{
    boxShadow: 2,
    bgcolor: '#2A293D',
    borderRadius: '2px'
  }}
>
  View devices
</Button>

当前页面显示 #

问题原因及修复方案 #

你直接把history当成函数调用是错误的——从history.js导出的是history实例对象，不是函数。正确的跳转应该调用实例上的push方法：

修改组件中的点击事件代码：

onClick={() => {
  console.log(userDeleted);
  // 用history.push替代直接调用history
  history.push("/associated", {
    state: {
      devices: userDeleted.devices,
      email: userDeleted.email
    }
  });
}}

同时要确认组件中已正确导入自定义的history实例：

// 组件顶部添加导入，路径根据实际文件位置调整
import history from './history.js';

如果是在React Router环境下，更推荐使用框架自带的导航钩子，避免自定义history的兼容性问题：

• React Router v6+ 使用useNavigate：

import { useNavigate } from 'react-router-dom';

// 组件内部声明
const navigate = useNavigate();

// 跳转逻辑
navigate("/associated", { state: { devices: userDeleted.devices, email: userDeleted.email } });

• React Router v5 使用useHistory：

import { useHistory } from 'react-router-dom';

// 组件内部声明
const history = useHistory();

// 跳转逻辑
history.push("/associated", { state: { devices: userDeleted.devices, email: userDeleted.email } });

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