使用withRouter后仍报TypeError: history.push is not a function怎么修复？

问题原因 #

• 你在组件参数中仅解构了id属性，withRouter注入给组件的history属性没有被接收，导致history是未定义状态，调用push方法自然会报错
• 如果你的项目中react-router-dom版本为v6及以上，该版本已经正式移除了withRouter高阶组件，这种用法本身就不生效，且原有的history.push用法也被替换为新的导航API
• 额外隐藏问题：firestore.set是异步方法，你当前的写法会在调用set后立刻执行跳转，可能出现数据还未完成写入就已经跳走的情况

解决方案 #

场景1：使用react-router-dom v5版本 #

只需要修改组件的参数解构部分，把history从props中取出来即可：

// 把原来的组件参数改成下面这样，加入history的解构
const Session = ({ id, history }) => {
  // 原有代码不变
}

如果要解决异步写入的问题，把提交函数改造成async/await写法：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const userRef = firestore.collection("users").doc(id);
    // 等待写入操作完成再执行后续逻辑
    await userRef.set(
      {
        items: {
          id,
          // 其余变量
        },
      },
      { merge: true }
    );
    console.log(" saved");
    stocksCounter();
    history.push("/");
  } catch (err) {
    console.log(err);
  }
};

场景2：使用react-router-dom v6及以上版本 #

v6版本推荐使用函数组件专属的useNavigate钩子实现导航，完全不需要使用withRouter：

1. 替换原有导入，移除withRouter相关代码

// 删除原来的import { withRouter } from "react-router-dom"
import { useNavigate } from "react-router-dom";

2. 组件内部调用钩子获取导航方法

const Session = ({ id }) => {
  const classes = useStyles();
  const navigate = useNavigate(); // 新增这一行
  // 其余原有代码
}

3. 替换跳转逻辑，同样建议加上异步等待逻辑：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const userRef = firestore.collection("users").doc(id);
    await userRef.set(
      {
        items: {
          id,
          // 其余变量
        },
      },
      { merge: true }
    );
    console.log(" saved");
    stocksCounter();
    navigate("/"); // 替换原来的history.push("/")
  } catch (err) {
    console.log(err);
  }
};

4. 修改导出语句，移除withRouter包裹：

export default Session;

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