ReactJS点击按钮报错TypeError: navigate.push is not a function如何解决？

错误原因 #

你当前使用的是react-router-dom v6及以上版本，useNavigate()钩子返回值为函数类型，并不是v5及更早版本中的history对象，没有push实例方法，调用navigate.push就会抛出该类型错误。

修复方法 #

直接调用navigate函数传入目标路由即可，不需要追加.push调用：
将代码里的

navigate.push("/quiz");

修改为：

navigate("/quiz");

如果需要实现替换当前历史记录的效果（用户点击浏览器后退按钮不会回到当前页面），可以传入第二个配置参数：

navigate("/quiz", { replace: true });
// 等价于旧版本的 history.replace("/quiz")

修正后的完整代码 #

import { Button } from "@material-ui/core";
import { Container } from "@material-ui/core";
import { useNavigate } from "react-router-dom";
import "./Home.css";

const Home = () => {
  const navigate = useNavigate();

  const sendSubmit = () => {
    // 去掉.push直接调用navigate
    navigate("/quiz");
  };
  return (
    <Container className="content">
      <h1 id="quiz-title">网络钓鱼测试</h1>
      <h2 class="question-text">
        你觉得你能通过我们的网络钓鱼测试吗？
      </h2>
      <p className="description">
        目前互联网上存在大量的社会工程学攻击，但并非所有攻击都能成功欺骗用户。不过有部分诈骗页面和原版网站完全一致，大部分用户通常都会被这类攻击诱导。
      </p>
      <p className="description">
        你觉得你足够敏锐，能识别出这些攻击吗？
      </p>
      <p className="description">
        我们准备了这个网络钓鱼测试，会给你展示一些非常逼真的互联网社会工程学攻击案例，希望你能顺利通过！
      </p>
      <p>""</p>
      <Button
        className="button"
        variant="contained"
        color="primary"
        size="large"
        onClick={sendSubmit}
      >
        开始测试
      </Button>
    </Container>
  );
};

export default Home;

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