• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

218
Vistas
React Router (Versión 6.0.2) hace que la página no responda ReactJS

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;
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda