navigate.push is not a function

Question

I got the error in react reuter dom version related to navigate.push is not a function. this following error disturbing my whole clean code, It'll be great if somebody helps me to resolve this.

This is my code

import { Link, useNavigate } from "react-router-dom";
import { auth } from "./firebase";

function Login() {
  const navigate = useNavigate();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const signIn = (e) => {
    e.preventDefault();

    auth
      .signInWithEmailAndPassword(email, password)
      .then((auth) => {
        navigate.push("/");
      })
      .catch((error) => alert(error.message));
  };

  const register = (e) => {
    e.preventDefault();

    auth
      .createUserWithEmailAndPassword(email, password)
      .then((auth) => {
        //it successfully created a new user with email and password

        if (auth) {
          navigate.push("/");
        }
      })
      .catch((error) => alert(error.message));
  };

score 3 · Accepted Answer · answered Dec 02 '21 at 13:56

3

If you are using React Router v6: use navigate("/") instead of navigate.push("/")

answered Dec 02 '21 at 13:56

Andrew F

504
2
7

@VishalMishra Please, mark as right answer – Andrew F Dec 02 '21 at 14:02
How do I make it work if I use: BrowserRouter as useNavigate because when I try that it says Navigate is not a function – ReactPotato Dec 15 '21 at 04:41

score 0 · Answer 2 · answered Feb 15 '23 at 00:32

I ran into this issue and ran into a sweet nugget to fix the issue, code example below...

import { StackActions } from '@react-navigation/routers';

onPress={() => {
  const pushAction = 
  StackActions.push('ProfileAnimal', { animal_id: item.id });
  this.props.navigation.dispatch(pushAction);
  this.props.navigation.navigate('ProfileAnimal', {animal_id: item.id});
  };

navigate.push is not a function

2 Answers2