Manejando enlaces y configuraciones

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: ‘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));
}, []);

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=‘canonical’ 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 “to” 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

Repositorio del curso
https://github.com/platzi/PlatziVideo/tree/feature/router-redux

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 “a 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 “Error: 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!!