A veces solo tienes 5 minutos de sobra. En lugar de desperdiciarlo en las redes sociales, ¡obtengamos una introducción de 5 minutos a React-Router! En este tutorial, aprenderemos los conceptos básicos del enrutamiento en React mediante la creación de navegación para un sitio web de una tienda de tejido de Scrimba. No es real, pero quizás algún día ...;)
Si desea una introducción adecuada a este tema, puede unirse a la lista de espera para mi próximo curso avanzado de React, o si todavía es un principiante, consulte mi curso introductorio sobre React.
¿Qué es React-Router, de todos modos?
Muchos sitios web modernos en realidad están formados por una sola página, simplemente se ven como varias páginas porque contienen componentes que se representan como páginas separadas. Estos se refieren generalmente como ZEPA - s ingle- p edad a plicaciones. En esencia, lo que React Router hace es renderizar condicionalmente ciertos componentes para que se muestren dependiendo de la ruta que se use en la URL ( /para la página de inicio, /aboutpara la página de información, etc.).
Por ejemplo, podemos usar React Router para conectar www.knit-with-scrimba.com/ a www.knit-with-scrimba.com/about o www.knit-with-scrimba.com/shop
Suena genial, ¿cómo lo uso?
Para usar React Router, primero debe instalarlo usando NPM:
npm install react-router-dom Alternativamente, puede usar este campo de juegos en Scrimba, que ya tiene el código completo escrito.
Deberá importar BrowserRouter, Route y Switch desde el react-router-dompaquete:
import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; En mi ejemplo, vinculo la página de destino con otras dos "páginas" (que en realidad son solo componentes) llamadas Shopy About.
Primero, deberá configurar su aplicación para que funcione con React Router. Todo lo que se renderiza deberá ir dentro del elemento, así que envuelva su aplicación en esos primero. Es el componente que hace toda la lógica de mostrar varios componentes que le proporcionas.
// index.js ReactDOM.render( , document.getElementById('root') ) A continuación, en el componente de su aplicación, agregue el Switchelemento (etiquetas de apertura y cierre). Esto asegura que solo se procese un componente a la vez. Si no usamos esto, podemos usar el Errorcomponente por defecto , que escribiremos más adelante.
function App() { return ( ) } Ahora es el momento de agregar sus etiquetas. Estos son los enlaces entre los componentes y deben colocarse dentro de las etiquetas.
Para decirle a las etiquetas qué componente cargar, simplemente agregue un pathatributo y el nombre del componente que desea cargar con el componentatributo.
Muchas URL de la página de inicio son el nombre del sitio seguido "/", por ejemplo, de www.knit-with-scrimba.com/ . En este caso, agregamos exacta la etiqueta Ruta. Esto se debe a que las otras URL también contienen "/", por lo que si no le decimos a la aplicación que solo necesita buscar /, carga la primera para que coincida con la ruta y obtenemos un error bastante complicado de resolver.
function App() { return ( ) } Ahora importe los componentes a la aplicación. Es posible que desee tenerlos en una carpeta de "componentes" separada para mantener el código limpio y legible.
import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; En ese mensaje de error que mencioné anteriormente, que se carga si un usuario escribe una URL incorrecta. Es como una etiqueta normal , pero sin ruta. El componente Error contiene
Oops! Page not found!
. No olvide importarlo a la aplicación.function App() { return ( ) } Hasta ahora, solo se puede navegar por nuestro sitio escribiendo las URL. Para agregar enlaces en los que se puede hacer clic al sitio, usamos el Linkelemento de React Router y configuramos un nuevo Navbarcomponente. Una vez más, no olvide importar el nuevo componente a la aplicación.
Ahora agregue un Linkpara cada componente en la aplicación y use to="URL"para vincularlos.
function Navbar() { return ( Home About Us Shop Now ); }; ¡Su sitio ahora tiene enlaces en los que se puede hacer clic que pueden navegar por su aplicación de una sola página!
Conclusión
Así que ahí lo tenemos. Si desea navegar fácilmente por una aplicación React, olvídese de las etiquetas de anclaje y agregue React Router. Es limpio, está organizado y hace que agregar y eliminar páginas sea mucho más fácil.
Para obtener más información sobre React Hooks y otras excelentes funciones de React, puede unirse a la lista de espera para mi próximo curso avanzado de React.
O si está buscando algo más amigable para principiantes, puede consultar mi curso introductorio sobre React.
Codificación feliz;)