¿Alguien puede ayudarme con los conceptos básicos de React Hooks? Soy relativamente nuevo y no pude encontrar la ayuda adecuada en línea.
import React from 'react' import { auth, provider } from "../../../firebaseSetup"; import { useNavigate } from "react-router-dom" const GoogleAuth = async() => { const navigate = useNavigate() auth.signInWithPopup(provider).then(() => { navigate('/home'); }).catch((error) => { console.log(error.message) }) } export default GoogleAuth Recibo un error en const navigate = useNavigate() diciendo:
Error: Invalid hook call. Hooks can only be called inside of the body of a function componentLo que quieren para useNavigate (y todos los ganchos) es que se llame solo en el nivel superior de un componente React o un gancho personalizado.
No llame a Hooks dentro de bucles, condiciones o funciones anidadas. En su lugar, siempre use Hooks en el nivel superior de su función React, antes de cualquier retorno anticipado.
Consulte las Reglas de los anzuelos para obtener más información.
Una solución a su problema podría ser llamar a const navigate = useNavigate() en el componente donde usará GoogleAuth y pasar navigate como parámetro. Como ejemplo así:
import React from 'react' import { auth, provider } from "../../../firebaseSetup"; import { useNavigate } from "react-router-dom" const GoogleAuth = async(navigate) => { auth.signInWithPopup(provider).then(() => { navigate('/home'); }).catch((error) => { console.log(error.message) }) } export default GoogleAuth import GoogleAuth from "GoogleAuth"; const App = ()=>{ /* here at the top level, not inside an if block, not inside a function defined here in the component... */ const navigate = useNavigate(); useEffect(()=>{ GoogleAuth(navigate) },[]) return <div></div> } export default App;