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

Question

我正在尝试为我的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;

Answer 1

可以通过以下代码查看

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

以及内部 Home 箭头功能

const navigate = useNavigate();

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

Answer 2

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

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

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

Answer 3

在以前的版本中，当我们使用 useHistory 钩子时，我们使用推送功能

const history = useHistory() const fun = () => { history.push('/link') }

现在升级 React 后，我们使用 useNavigate() 钩子，我们可以直接在参数中保留链接，如下所示：

const naviagte = useNavigate() const fun = () => { navigate('/link') }