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;