React history.push to localhost:3000 not redirecting

Question

I am creating a login page using React. history.push("/") isn't directing and this error in console: Uncaught TypeError: Cannot read properties of undefined (reading 'push').

Did this from tutorial and followed the codes exactly, but still can't figure out for days.

import { useState } from "react";
import styles from "./register.css";
import Login from "../../containers/login/index";

function Register({ props, history }) {

    const [name, setName] = useState();
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();

    function registerClicked() {
        if (name !== " " && email !== " " && password !== " ") {
            console.log(name, email, password);
            alert("Thanks for registering");
            history.push("/");
        } else {
            alert("Please register to continue");
        }
    }


    return(
        <div className="regContainer">

            <p className="registerTitle">Register to sign in</p>

            <input type="text" 
            placeholder="Create username" 
            onChange={(nameText) => setName(nameText.target.value)} />

            <input type="text" 
            placeholder="Email address" 
            onChange={(emailText) => setEmail(emailText.target.value)} />

            <input type="password" 
            placeholder="Password" 
            onChange={(passwordText) => setPassword(passwordText.target.value)} />

            <button onClick={() => registerClicked()}>Register</button>

            <p className="loginInstead">Already have an account? Sign in instead</p>

        </div>
    );
}

export default Register;

You can also solve this issue by wrapping your component with `withRouter()` hook by `react-router`. — Ali Hussnain - alichampion, Mar 07 '22 at 06:12
`import { useHistory } from "react-router";` `function Register({ props }) {` `const history = useHistory();` ` history.push("/")` ` }` — Umair Anser, Mar 07 '22 at 06:13
use it as described in https://stackoverflow.com/a/70274942/4189897 — NikhilGoud, Mar 07 '22 at 06:23

score 0 · Accepted Answer · answered Mar 07 '22 at 06:20

0

import { useNavigate } from "react-router-dom"

export default const Register = () => {
  const navigate = useNavigate();
  
  if(...){
    navigate('/')
  }
  
  
  return <div></div>
}

answered Mar 07 '22 at 06:20

Vugar Taghiyev

413
3
9

Excellent! Thank you, it works! withRouter() and useHistory suggestions above did not work. Any idea why? – Suffian Samsuddin Mar 07 '22 at 06:24
In react-router-dom v6 useHistory() is replaced by useNavigate(). – Vugar Taghiyev Mar 07 '22 at 06:26

React history.push to localhost:3000 not redirecting

1 Answers1