REACTJS giving the following error: TypeError: navigate.push is not a function

I am trying to implement a home page for my react.js website. My layout is fine and my code compiles without problems.

However when I click my button I am getting the following error on the website application: TypeError: navigate.push is not a function on the line that says navigate.push("/quiz")

I am new to react and if anyone can help me I would be greatful!

Here is my code:

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;

2 answers

  • answered 2021-11-23 02:27 Mahesh

    can check with below code

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

    and inside Home arrow function

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

  • answered 2021-11-23 17:30 Denys

    issued a push your code must look like this:

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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum