Cuando uso la nueva función de navigate
en ReactJS React Router DOM, hace que la página no responda. Creo que hay un error en mi código porque cuando agrego la función de navigate
react-router-dom a un botón como () => navigate('home')
funciona. Pero, cuando lo agrego en useEffect
, no funciona, la página deja de responder.
Verifique mi código si hay algún error porque no sé mucho sobre esto.
import React, { useEffect, useState } from 'react'; import './App.css'; import { BrowserRouter as Router, Routes, Route, Link, Navigate, useNavigate } from "react-router-dom"; import Home from './Pages/Home'; import Login from './Pages/Login'; import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth"; import {auth} from './Config'; function App() { const [authenticated, setAuthenticated] = useState(false); const navigate = useNavigate(); useEffect(() => { onAuthStateChanged(auth, (user) => { if (user) { setAuthenticated(true); navigate('home') // doesn't work } else { setAuthenticated(false); } }) }) const signup = (email, pass) => { createUserWithEmailAndPassword(auth, email, pass) .then((userCredential) => { const user = userCredential.user; console.log(user) navigate('home') }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; console.log(errorMessage) }); } const login = (email, pass) => { signInWithEmailAndPassword(auth, email, pass) .then((credentials) => { console.log(credentials.user); }) .catch((error) => { console.log(error.message); }) } return ( <Routes> <Route path='/' element={<button className="primary-button" onClick={() => navigate('home')}>Home</button>} /> // this works <Route path="/home" element={<Home authenticated={authenticated} />}></Route> <Route path="/auth" element={<Login signup={signup} login={login} />}></Route> </Routes> ); } function AppWrapper() { return ( <Router> <App /> </Router> ) } export default AppWrapper;
Mi conjetura sería del código que está procesando en bucle ya que al gancho useEffect
le falta una matriz de dependencia. Cada vez que la App
renderiza, parece que recrea el oyente de autenticación y probablemente activa una nueva renderización.
Agregue la matriz de dependencias a useEffect
para que solo se llame una vez en el montaje del componente y devuelva la función de cancelación de suscripción en la función de limpieza de efectos.
useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { if (user) { setAuthenticated(true); navigate('home'); } else { setAuthenticated(false); } }); return unsubscribe; }, []); // <-- empty dependency == call once on mounting