Estoy usando firebase v9 y react-router-dom v6 en mi aplicación React. Puedo detectar el evento onauthstatechanged pero no puedo enrutar a la ruta privada. Aquí están mis componentes: Auth:
export const AuthProvider = ({ children }) => { const [currentUser, setCurrentUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { onAuthStateChanged(auth, user => { setCurrentUser(user); setLoading(false); console.log("un auth",user); }) }, []); if(loading) return null; return ( <AuthContext.Provider value={{ currentUser }} > {children} </AuthContext.Provider> ); };aplicación:
<AuthProvider> <Router> <Header /> <Routes> <Route path="/" element={<Login/>} /> <Route path="/home" element={ <PrivateRoute> <Home /> </PrivateRoute> }/> </Routes> </Router> </AuthProvider>Hasta ahora, el evento onauthstatechanged se está activando. Pero, ¿cómo puedo enrutar a una ruta privada?
¿Está intentando navegar a una ruta diferente cuando el estado de authstate ha cambiado?
Si ese es el caso, puedes usar
import {useNavigate} from 'react-router' const navigate = useNavigate() onAuthStateChanged = () => { ...your code navigate('your_private_route') } useNavigate es un gancho de reacción proporcionado por react-router