Enrutamiento del lado del cliente en React Router
En esta lección, consideraremos un componente importante de las aplicaciones de una sola página (SPA) - el enrutamiento del lado del cliente. Tal enrutamiento nos permite actualizar la URL en el navegador sin solicitudes adicionales del documento desde el servidor.
Inicie la aplicación que creamos en
la lección anterior. Abra el panel de desarrollador y
en él, la pestaña 'Red' (Network para Chrome).
Después de cada clic en nuestros enlaces,
vemos cada vez una solicitud para el document. Es decir,
cada vez le pedimos al servidor que nos cargue el
document.
Ahora aprovechemos las ventajas de
React Router para deshacernos de tales
solicitudes. Para ello, abramos root.jsx
de nuestra aplicación y reemplacemos la etiqueta a
del marcado por el componente Link. Para
empezar, añadamos su importación:
import { Outlet, Link } from 'react-router-dom';
Ahora reemplacemos las etiquetas a con el atributo
href. En lugar del fragmento de código:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Ahora tendremos el siguiente código:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Abramos nuevamente la pestaña 'Red' en
el panel de desarrollador, en la barra de direcciones
establezcamos la ruta raíz y actualicemos
la página. Ahora hacemos clic en los enlaces
y vemos que el document se solicitó
solo una vez durante la carga inicial
y en los clics posteriores ya no hay solicitud al
servidor.
Tome la aplicación creada por usted en las tareas de las lecciones anteriores. Usando los materiales de la lección, implemente en ella el enrutamiento del lado del cliente, modificando sus enlaces, como se describe en la lección.
