No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
10H
43M
45S
Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Manejando enlaces y configuraciones

8/29
Recursos

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 鈥榯o=鈥/mi-enlace鈥欌.

Aportes 34

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Tambi茅n es bueno porque no tiene limitaciones para darle par谩metros, bueno para el SEO 馃槃

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

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! 馃憦馃憦馃憦馃憦

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

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

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

Muy genial estas clases de Router

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

Esta es la magia de SPA (Single Page Application)

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>

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

Muy pr谩ctico y clara la comparaci贸n entre <Link> y <a>

Como vamos avenzando de rapido, genial curso 馃挭馃挭馃く

Hola Profe y compa帽eros necesito ayuda!
tengo una advertencia y es asi:
Line 17: React Hook useEffect has a missing dependency: 鈥榩rops鈥. Either include it or remove the dependency array. However, 鈥榩rops鈥 will change when any prop changes, so the preferred fix is to destructure the 鈥榩rops鈥 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));
}, []);

En React usamos import { Link } from 'react-router-dom'; para sustituir las etiquetas <a></a>. Esto porque Link hace la carga
de las rutas m谩s r谩pida, realmente no hace un refresh de las url, como lo hace la etiqueta ancla. Esto da m谩s velocidad
y una mejor experiencia de usuario.

<Linkto="/" rel="canonical">
        <imgsrc={Logo}widht="100" />
</Link>

Usar rel=鈥榗anonical鈥 nos ayuda a evitar contenido identico o duplicado que aparezca en varias URL, y mejora el SEO.

Si por ejemplo queremos que al hacer click en algo, nos lleve a una diferente secci贸n de la misma p谩gina (Que una imagen nos
lleve al footer haciendo scroll, hacemos lo siguiente:

$ npm install--save react-router-hash-link

Luego en tu componente:

import { HashLink as Link } from'react-router-hash-link';

Finalmente:

<Link to="home-page#section-three">Section three</Link> y en otra etiqueta:

<div id='#section-three'>Hola</div>

Hermoso Todo XD

Profesor explica super bien, aunque no me sale con switches sino con routes, la explicaci贸n ufff vale un mont贸n

Tengo entendido que esto es solo para la navegaci贸n interna de la App, o sea enlaces que lleven a p谩ginas fuera de la misma si se usa <a></a>, si?

Debemos agregar nuestra navegacion fluida, donde ahora lo que tenemos que hacer es revisar nuestra aplicacion y revisar cuales son los elementos por los cuales nos vamos a mover. Como en Header podria ser nuestro logo. Para poder converitrlo un enlace tenemos que importar un Objeto de nombre Link desde el react-router-dom.

Despues separaremos el elemento que queramos que tenga un enlace a donde nos va a mover. Ya ahora tendremos que agregar dentro de Link la imagen o elemento que queremos que sea enlace.

Como propiedad a link tenemos 鈥渢o鈥 donde pondremos la ruta que queremos a la que vaya este enlace. Link lo que hace es evitar que se nos recargue la pagina y hace transparente el llamado del componente.

import React from 'react';
import { Link } from 'react-router-dom'
import '../assets/styles/Components/Header.scss'

import logo from '../assets/static/logo-platzi-video-BW2.png';
import userIcon from '../assets/static/user-icon.png'

const Header = () => (
<header className="header">
  <Link to="/">
    <img className="header__img" src={logo} alt="Platzi Video" />
  </Link>
)

export default Header;

Asi hacemos con todos los enlaces que tengamos dentro de nuestra aplicacion

estupendo, que clase tan maravillosa, y el cambio tan brutal entre link y a 馃槃

Muchas gracias por el curso, es bien consiso y claro. Sin embargo tengo una duda, en caso que quiera usar react router para poder hacer un cambio de la pagina sin tener que cambiar todo el contenido como se deberia hacer?.
por ejemplo, tengo dos componentes aparte del home. con el link to paso del home al componente 1, luego dentro del componente 1 selecciono una seccion y lo que quiero es hacer que un elemento, mi componente 2, se posicione en la parte superior de esta pagina (ojo, quiero que me cambie el path, pero necesito que la visualizacion sea la de que se despliega un elemento por sobre el elemento ya existente).

Todo me funciona a la perfecci贸n, gracias!!
Pr谩cticas:

super practico

El componente es similar a un elemento 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 simplemente debemos pasarle la prop to=鈥/mi-enlace鈥.

Esa peque帽a diferencia de Link a un 鈥渁 ref鈥 hace una gran experiencia. 馃槃

Hola, al usar <Link>, la pagina no hay cambia visualmente, sin embargo puedo notar que si interactua con el URL,pues este si cambia; por lo que no se que podria hacer para corregir esto.
Aclaro que al darle refresh si cambia visualmente.
Tambien me toco agregar <BrowserRouter> para encapsular <Link>, ya que de otro modo me salia 鈥淓rror: Invariant failed: You should not use <Link> outside a <Router>鈥

Link permite cambiar de ruta sin refrescar la p谩gina, por tanto, la transacci贸n de una ruta a otra es m谩s fluida.

<Link to="/">
  <img className="header__img" src={logo} alt="Mat铆as Video" />
</Link>

Por otro lado, <a/> hace lo mismo, pero por el contrario a Link, esta si genera un refresh en la p谩gina y la transici贸n de una p谩gina a otra es menos fluida.

<a href="/">
  <img className="header__img" src={logo} alt="Mat铆as Video" />
</a>

Wow trabajar con react es increible cada vez me doy cuenta de la gran herramienta que es

Increible, hasta los estilos de la etiqueta ,<a> se mantienen

Me pareci贸 importante cuando dijo que Link est谩 utilizando la etiqueta <a; apliqu茅 estilos en esta etiquetaa, y efectivamente se vieron reflejados. Genial la manera como Link mejora la experiencia de usario.

La verdad muy bueno el curso, el profesor y react.js. Buen铆simo

n

.

Que pro se ve!!