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

Question

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;

Suchta

Which version of react-router-dom is used? if its v5 you can use import { useHistory } from "react-router-dom"; insted of your useNavigate – Bethezel

@Mahesh When I try using useHistory it gives me the following error: Attempted import error: 'useHistory' is not exported from 'react-router-dom'. Also my version is 6.0.2 , [email protected]. – Suchta

Ok in v6 useHistory is replaced by useNavigate so you can check with below code import {useNavigate} from 'react-router-dom'; const navigate = useNavigate(); navigate('/quiz'); – Bethezel

@Mahesh Can I call navigate('/home') inside onClick={} – Suchta

insted of navigate.push("/quiz"); you can use navigate("/quiz"); – Bethezel

@Mahesh Works perfectly fine! Thank you so much! If you can submit your code as an answer I can mark it as a solution :) – Suchta

Answer 1

can check with below code

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

and inside Home arrow function

const navigate = useNavigate();

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

Bethezel

This solved the issue for me but I don't get why it's so hard to find this info of having to use navigate(...) instead of navigate.push(...). Anyways, thank you. – Polyandrist

Answer 2

issued a push your code must look like this:

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

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

Anabaptist

Answer 3

In previous versions as we are using useHistory hook, we are using push functions

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

Now after upgrading react we are using useNavigate() hook and we can keep link directly in params like below:

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

Olfe

Answer 4

This is what actually helped me:

from:
navigate.push('*');

to:
navigate('*);

That should fix your error, happy coding!

Remorseless