Manejando enlaces y configuraciones

Clase 8 de 29 • Curso de React Router 5 y Redux

Resumen

El componente <Link /> es similar a un elemento <a/> ya que nos permite navegar dentro de la aplicación, pero sin la necesidad de tener que recargar la página. Para indicarle el destino a <Link /> simplemente debemos pasarle la prop ‘to=’/mi-enlace’’.

Diego Ojeda

student•

También es bueno porque no tiene limitaciones para darle parámetros, bueno para el SEO :D

<Link to="/" rel="canonical">
        <img src={Logo} widht="100" />
</Link>

Alejandro González Reyes

student•

podrías explicar un poco mas a detalle, suena interesante lo que mencionas

Bernardo Aguayo Ortega

student•

thanks bro! I'm going to serach info about that

Lucas Silberberg

student•

No suelo hacer estos comentarios, pero este profesor se ganó el cielo! Es excelente como explica. He tenido muchos profesores y he hecho miles de cursos, pero Oscar le gana a todos! 👏👏👏👏

Angie Garcia

student•

Me ha parecido super entretenido y me motiva mucho la manera de avanzar a querer hacer este tipo de aplicaciones

Bernardo Aguayo Ortega

student•

let's go Angie!!

Alfonso Neil Jiménez

student•

let´s go Empoderatech guys!

David Dias

student•

Yo diría que Link es lo que le da la magia a React

Wandy Rafael Santana Evangelista

student•

Aqui tienen documentacion que pueden ayudarlos y extender un poco el uso de Link y todo lo que podemos hacer con el: Click Aqui

Alexander Celis

student•

Cual es la diferencia de usar HashRouter y BrowserRouter.

Dilan Santiago Ariza Cañon

student•

"El componente <BrowserRoute> es mas utilizado en servidores que manejan peticiones dinámicas, mientras que <HashRouter> se utiliza en sitios web estáticos"

Fuente: BrowserRoute y HashRouter

Alexander Celis

student•

Muchas gracias

Karl Behrens Gil

student•

Muy genial estas clases de Router

Mayra Macedo

student•

Y si quiero redirigirme dentro de la misma pagina ¿Como seria?

Héctor Martínez Reséndiz

student•

Es lo mismo, en cualquier parte de tus páginas, puedes colocar:

 &lt;Link to=&quot;/login&quot;&gt;Iniciar Sesión&lt;/Link&gt;

Y esto te redirecciona a la página que tu quieras.

Dime si te resolví tu duda, o explícame un poco mas para entender que necesitarías.

Mayra Macedo

student•

No deseo cambiar de route ,digamos le doy un click al logo y me manda al footer esta dentro de la misma route (/)

Manuel Alejandro Martinez

student•

¿Disculpen , tengo una duda , al dar click infinitamente en el icono de 'platzi video' cuando estoy en mi Home como evito esa acumulación de navegaciones?

Khevin Efraín

student•

Al darle click al ícono te lleva a la misma ruta entonces no acumula la navegación solo vuelve a renderizar el componente. Lo puedes comprobar con un console.log en tu componente y dándole a click varias veces.

Jose Daniel Molina

student•

Esta es la magia de SPA (Single Page Application)

Mario Barros Carrillo

student•

Escribir

 <link to="/login">
	Iniciar sesión
 </link>

Arrojará un error. Lo correcto es escribir la primera letra mayúscula así:

 <Link to="/login">
	Iniciar sesión
 </Link>

Sofia Nupieri

student•

El Link a diferencia de la etiqueta <a> evita que la aplicacion se renderice a la vista del usuario

Tomás Herrou

student•

Muy práctico y clara la comparación entre <Link> y <a>

Platzi Team

student•

Como vamos avenzando de rapido, genial curso 💪💪🤯

Rodrigo Reyes

student•

Si le puse estilos a la etiqueta a, link toma esos estilos?

Massimo Di Berardino

student•

Hola @RoiFuries, si porque un componente link lo que renderiza es una etiqueta a

Juan David González Rodríguez

student•

si exacto es como si fuera la etiqueta a, pero mejor mas fast

Miguel Angel Calambas Vivas

student•

<Link> tambien me seriviria para navegar en la propia página? Me refiero asi como a <a href="#ALgunaID"> Tambien se puede hacer lo mismo con <Link>

Massimo Di Berardino

student•

¡Hola Max! Por lo que estuve leyendo puedes hacerlo con el atributo id y quedaría algo como esto <Link id="myId"></Link>

Brandon Ortiz Álvarez

student•

Totalmente, la diferencia esta en la forma como se muestra el contenido, evita hacer reloads feos, oscar explico esto en una clase! :D

Alfredo Mauricio Aguirre Catucuago

student•

Alguien me podría explicar como funciona esa magia de que con la etiqueta "a" recarga la pagina pero con el componente "Link" no lo hace, ¿Qué sucede por detrás para que con "Link" no recargue la pagina" ?

Esteban Casallas

student•

Hola, supongo que es por el manejo de eventos de React con un Link se agrega un evento onclick que ejecuta la acción correspondiente de una forma en la que no se recarga la pagina, mientras que si usamos la etiqueta <a> esta nos sirve para direccionar al usuario a otra web, en otra ventana y algunas funciones propias de la etiqueta, saludos !!

andrés eduardo betancourt bescanza

student•

Link por defecto hace el preventDefault() cosa que la etiqueta <a> no hace

Luis Garcia Hernandez

student•

buen dia alguien sabe como resolver el problema de rutas en github pages para poder recargar la pagina

Daniel Acevedo

student•

El problema es que busca los archivos en la raíz del proyecto, yo resolví el problema subiendo a Firebase solo la carpeta dist. Puedes subirlo a cualquier servidor pero solo sube dist no todas las carpetas

Luis Garcia Hernandez

student•

En efecto funciono y doble gracias ahora ya conozco un poco Firebase y su potencial

Angel David Castiblanco Sepulveda

student•

Esto lo que haría es cargar varias paginas de mi sitio para el usuario, no volvería el pirmer acceso mas lento?

Jaime David Burbano Montoya

student•

No entendí tu pregunta. ¿Podrías explicarla un poco mas?

Angel David Castiblanco Sepulveda

student•

No, no ya me dí la respuesta jaja, pensé que como eran varias rutas tenía el navegador que cargar varias paginas y tenerlas almacenadas pero en realidad lo unico que tiene que cargar son los componentes y no son nada pesados.

Jonatan Ariste

student•

Hola Profe y compañeros necesito ayuda! tengo una advertencia y es asi: Line 17: React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when any prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

Me la da cuando uso useEffect para llamar a un action que me popula el store. No es error pero tengo el proyecto super prolijo salvo esa advertencia. No puedo evitar llamar a ese action cuando muestro ese componente, si lo saco de useEffect se rompe y queda todo en loop la unica forma es esta pero me queda ese warning.

Mi codifo es el siguiente: useEffect(() => { props.getInfo(props.history.location.pathname.substr(1)); }, []);

Juan Castro

teacher•

:wave: Hey!

Al usar props.getInfo estás definiendo que tu efecto ejecutará una función que te llega por medio de props. Esto significa que si esas props cambian, el efecto debería volver a ejecutarse.

Solo debes añadir props.getInfo al segundo argumento de useEffect.

useEffect(() => {
  props.getInfo(/* ... */);
}, [props.getInfo]); // <- mira

Si por alguna razón no quieres eso, puedes pedirle a ESLint que no te revise esa regla en este específico momento.

useEffect(() => {
  props.getInfo(/* ... */);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Referencias: :point_right: https://platzi.com/clases/1651-react-ejs/22668-lectura-react-hooks/ :point_right: https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook

Manejando enlaces y configuraciones

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto