Curso React: 61. React Router: Rutas privadas - jonmircha

En este video te explico como podemos crear rutas privadas con React Router.

🎥 VIDEOS RECOMENDADOS


#React #Reactjs #ReactRouter

[jesuslopezrodriguez]

que maravilla Jhon mircha, todo lo explica a detalle, no da nada por echo y lo deja todo clarisimo siempre con ejemplo practicos

[cristianfarace]

Tremendo tip ninja tiraste, sos un genio

[signo]

para el que le interese V6:
<Route
exact
path="/dashboard"
element={<PrivateRoute component={Dashboard} />}
/>
const PrivateRoute = ({ component: Component }) => {
return auth ? <Component /> : <Navigate to="/login" />;
};

[lalojejeje]

Este curso como los demas de JonMircha, son oro liquido!!!... Jon Jon Jon!!!...

[josearmandozeballosduran]

Likeado, Suscrito y Compartido... Excelente explicación, por mucho la mejor que encontré.

[tavogus]

a alguien le salio con la version 6? 😅 me esta volviendo loco esto del cambio de versiones jaja

[addevmoises]

Muy excelente video, eso de agregar alias al desestructurar las props es genial, excelente video de la simulación de rutas privadas

[montotox]

Muy buenas explicaciones!! Muchísimas gracias por compartir esta información 💪

[cuaticito]

Muy buen curso profe, necesitaba aclarar cuestiones de React Router. Vi y leí muchos tutoriales, pero su explicación es una de las mejores. Le agradezco por compartir sus conocimientos.

[mastermaster]

auth = true;
auth= null;
por qué 2 veces se cambia el valor de 'auth'? 🤔🤔se supone que con uno solo funciona no?

[palmira]

Es increible como se simplifica en la v6 de react-router. Jon lo explicaria en 3 videos jaja. Excelente curso profesor 🤓

[heimancastro]

para el que le interese V6:
cambie la variable prop llamada component a private para no tener la confucion de element con component
el resto es todo lo que ha explicado el maestro
en el Roter.js
<Route
exact
path="/dashboard"
element={<PrivateRoute private={Dashboard} />}
/>

en PrivateRoute.js

const PrivateRoute = ({private:Private }) => {
return auth ? <Private /> : <Navigate to="/login" />;
};

[elbertjosesalasbrochero]

Seria bueno hacer consulta una api y hacer toda la logica de validacion y sumarle lo que hiciste.

[elbertjosesalasbrochero]

Jon cono hariamos para guardar sesion para no repetir ese proceso en cada componente y para destruir la sesion .

[conelecphp]

Bien Profe Jon por la explicación de las rutas privadas!!!

[d-landjs]

Excelente maestro!!! Espero lograrlo en el V6 xD

[r.w.s.]

Siempre se aprenden cosas nuevas en todos tus vídeos. No tienen desperdicio:)

[cristianfarace]

con la ultima version ahora quedaria asi

import React from 'react'
import { Navigate } from 'react-router-dom';


const PrivateRoute = ({ component: Component }) => {

let auth = false

return (

auth ? <Component/> : <Navigate to="/login"/>
)

};

export default PrivateRoute

y


<Route path="/login" element={<Login></Login>} />
<Route path="/dashboard" element={<PrivateRoute component={Dashboard} />}/>

[manoloexplaintome]

Buff me instalé la versión 6 (la actual) y todo cambia. Llevo un cacao tremendo...

[luisangel]

Despues de 10min de leer decumentacion la nueva version me salio asi :
En conceptos basicos creas la variable auth antes del return:
let auth;
auth = true;
auth = null;
Luego en las rutas:
<Route
path="dashboard"
element={auth ? <Dashboard /> : <Navigate to="/login" />}
/>