REACTJS 给出以下错误：TypeError: navigate.push is not a function

Posted 2023-02-21

【中文标题】REACTJS 给出以下错误：TypeError: navigate.push is not a function

【英文标题】：REACTJS giving the following error: TypeError: navigate.push is not a function

【发布时间】：2022-01-01 13:35:49

【问题描述】：

我正在尝试为我的 react.js 网站实现主页。我的布局很好，我的代码编译没有问题。

但是，当我单击我的按钮时，我在网站应用程序上收到以下错误：TypeError: navigate.push is not a function 在显示 navigate.push("/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 = () => 
    navigate.push("/quiz");
  ;
  return (
    <Container className="content">
      <h1 id="quiz-title">Phishing Quiz</h1>
      <h2 class="question-text">
        Do you think you can beat our phishing quiz?
      </h2>
      <p className="description">
        " "
        There are many social engineering attacks on internet however not all of
        them are good enough to trick users. However there are some scams that
        are identical to original websites and usually most of the users get
        tricked by them.
      </p>
      <p className="description">
        Do you think you are smart enough to handle these attacks?
      </p>
      <p className="description">
        We are challenging you with our phishing quiz which will show you
        examples of really good social engineering attacks on internet. We hope
        you can pass!
      </p>
      <p>""</p>
      <Button
        className="button"
        variant="contained"
        color="primary"
        size="large"
        onClick=sendSubmit
      >
        Start Quiz
      </Button>
    </Container>
  );
;

export default Home;

【问题讨论】：

使用了哪个版本的 react-router-dom？如果是 v5，您可以使用 import useHistory from "react-router-dom";安装您的使用导航

@Mahesh 当我尝试使用 useHistory 时，它给了我以下错误：Attempted import error: 'useHistory' is not exported from 'react-router-dom'. 另外我的版本是 6.0.2，react-router-dom@6.0.2。

OK 在 v6 中 useHistory 被替换为 useNavigate 所以你可以检查下面的代码 import useNavigate from 'react-router-dom';常量导航 = useNavigate();导航('/测验');

@Mahesh 我可以打电话给navigate('/home') inside onClick=

导航.push("/quiz");你可以使用 navigate("/quiz");

【参考方案1】：

发出推送，您的代码必须如下所示：

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

// delete push
const sendSubmit = () => 
navigate("/quiz");
;

【参考方案2】：

可以用下面的代码检查

import useNavigate from 'react-router-dom';

在 Home 箭头函数内部

const navigate = useNavigate();

const sendSubmit = () => 
    navigate("/quiz");
;