Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

243
Vistas
Rutas protegidas de React redirigiendo automáticamente incluso si no visito la ruta protegida

He creado una ruta protegida. Cuando un usuario no autorizado accede a él, se supone que el usuario debe ser redirigido a la página de inicio de sesión. Esta funcionalidad funciona bien, pero cuando alguien vuelve a cargar cualquier ruta en el sitio web, se redirige a la página de inicio de sesión si el usuario no está autorizado.

A continuación se muestra la función de rutas protegidas

 import React, { Fragment } from "react"; import { useSelector } from "react-redux"; import { Route, Redirect } from "react-router-dom"; const ProtectedRoutes = ({ component: Component, ...rest }) => { const { isAuthenticated, loading, user } = useSelector((state) => state.auth); return ( <> {loading === false && ( <Route {...rest} render={(props) => { if (isAuthenticated === false) { return <Redirect to="/login" />; } return <Component {...props} />; }} /> )} </> ); }; export default ProtectedRoutes;

y aquí está app.js

 import "./App.css"; import { useEffect } from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import Header from "./components/layouts/Header"; import Footer from "./components/layouts/Footer"; import Home from "./components/layouts/Home"; import Wishlist from "./components/layouts/Wishlist"; import ProductDetails from "./components/product/ProductDetails"; import { loadUser } from "./actions/userActions"; import ProtectedRoutes from "./route/ProtectedRoutes"; import store from "./store"; function App() { useEffect(() => { store.dispatch(loadUser()); }, []); return ( <div className="App "> <Router> <> <Route path="/" component={Header} /> <Route path="/" component={Home} exact /> <Route path="/home" component={Home} exact /> <ProtectedRoutes path="/wishlist" component={Wishlist} exact /> <Route path="/search/:keyword" component={Home} exact /> <Route path="/product/:id" component={ProductDetails} exact /> </> <Footer /> </Router> </div> ); } export default App;

si abro mysite/home, me redirige a iniciar sesión, ProtectedRoutes actúa como una función de autoinvocación, cada vez que recargo la página, se invoca a sí misma y, si no estoy autorizado, me redirige a la página de inicio de sesión.

Gracias por adelantado

about 4 years ago · Juan Pablo Isaza
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 Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda