I am trying to redirect signup function to home page in react, using usehistory Hook when i run my code it display such errore :: versions:"react": "^17.0.2", "react-router-dom": "^6.2.1" below is my login code given: Answer useHistory is not available in v6, useNavigate Instead of useHistory, Check here https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory

how to redirect to home page in react using useHistory Hook

I am trying to redirect signup function to home page in react, using usehistory Hook when i run my code it display such errore ::

export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

versions:”react”: “^17.0.2”, “react-router-dom”: “^6.2.1”

below is my login code given:

import {useState,React} from 'react'
import "./login.css"
import {
   Link,useHistory
} from "react-router-dom";

  
import {auth,db} from "./firebase"
function Login() {
  //taking input value from email and password field
   const history =useHistory()
  const[email,setEmail]=useState("")
  const [password,setPassword]=useState("")

  const signIn= e =>{
      e.preventDefault()
      console.log("it works")
  
  }



const signUp = e =>{
    e.preventDefault()
    
    auth.createUserWithEmailAndPassword(email,password)
    .then((auth)=> {
        console.log(auth)
          if(auth){
             history.push("/")
          }
    })
    .catch(error =>alert(error.message))
}




    return (
        <div className="login">
        <Link to ="/">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="amazon logo" className="login__image" />
            </Link>
       <div className="login__container">
           <h2 className="signLabel">sign-in</h2>
           <form>
               <h5 className="label">E-mail</h5>
               <input type="text" onChange={e=>setEmail(e.target.value)} value={email} placeholder="Enter your Email"/>
               <h5 className="label">password</h5>
               <input type="Password"  onChange={e=>setPassword(e.target.value)} value={password} placeholder="Enter your password" />

               <button type ="submit" onClick={signIn}className="login__sign__in">sign in</button>
           </form>

           <p className="privacy">
               before sign in please read the notice. we are not responsible for your data 
           </p>
           <button type="submit" onClick={signUp} className="login__create__account">
               create new account
           </button>
       </div>

        </div>
    )
}

export default Login

Answer

useHistory is not available in v6, useNavigate Instead of useHistory,

Check here https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory

// v6

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

function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

Advertisement

Answer