Implementando características de navegación en React

Introducción

En este proyecto, aprenderás a implementar características de navegación en una aplicación React. Crearás una aplicación simple con una barra de navegación y páginas a las que se puede acceder mediante enlaces.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto e instalar dependencias
• Cómo agregar rutas y coincidentes de rutas para habilitar la navegación de los menús en la barra de navegación
• Cómo agregar navegación desde la lista de tarjetas a las tarjetas individuales

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar React Router para manejar la enrutación del lado del cliente
• Crear enlaces y navegar entre diferentes páginas en una aplicación React
• Pasar datos entre componentes utilizando el objeto state en React Router

Configurar el proyecto

En este paso, aprenderás a configurar el proyecto e instalar las dependencias necesarias.

Abre tu editor de código y navega hasta el directorio del proyecto.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── Card.js
│   │   ├── Cards.js
│   │   └── Home.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

Luego, descarga las dependencias utilizando el comando npm install en la terminal, espera a que las dependencias terminen de descargarse y luego inicia el proyecto utilizando el comando npm start.

Una vez que el proyecto se inicia correctamente, haz clic en "Web 8080" para visualizarlo en tu navegador.

Agregar rutas y coincidentes de rutas

En este paso, aprenderás a agregar rutas y coincidentes de rutas para habilitar la navegación de los menús en la barra de navegación.

1. Abre el archivo src/index.js e importa los módulos necesarios:

   import React from "react";
   import ReactDOM from "react-dom/client";
   import "./index.css";
   import App from "./App";
   import reportWebVitals from "./reportWebVitals";
   import { BrowserRouter } from "react-router-dom";

2. Encierra el componente App con el componente BrowserRouter:

   root.render(
     <BrowserRouter>
       <App />
     </BrowserRouter>
   );

3. Abre el archivo src/App.js e importa los componentes y módulos necesarios:

   import React from "react";
   import { Route, Switch, Link } from "react-router-dom";
   import { Home } from "./components/Home";
   import { Cards } from "./components/Cards";
   import { Card } from "./components/Card";
   import "./App.css";

4. Agrega el menú de navegación y el componente Switch para manejar las diferentes rutas:

   const App = () => {
     return (
       <div className="app">
         <header>
           <Link to="/" className="menu menu-1">
             página principal
           </Link>
           <Link to="/cards" className="menu menu-2">
             página de tarjetas
           </Link>
         </header>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/cards" exact component={Cards} />
           <Route path="/cards/:id" component={Card} />
         </Switch>
       </div>
     );
   };

   El componente Switch asegura que solo se muestre una ruta a la vez, y los componentes Route definen las diferentes rutas y los componentes correspondientes que se deben renderizar.

Agregar navegación desde la lista de tarjetas a las tarjetas individuales

En este paso, aprenderás a agregar código para saltar de la página de la lista de tarjetas a las páginas de las tarjetas individuales.

1. Abre el archivo src/components/Cards.js e importa los módulos necesarios:

   import React from "react";
   import { Link } from "react-router-dom";

2. Agrega el código para renderizar la lista de tarjetas con enlaces a las páginas de las tarjetas individuales:

   export const Cards = () => {
     const colors = ["#26547c", "#ef476f", "#ffd166", "#06d6a0"];
   
     return (
       <div className="page cards">
         {colors.map((c, idx) => {
           return (
             <Link
               key={idx}
               to={{
                 pathname: `/cards/${idx + 1}`,
                 state: { bgColor: c }
               }}
             >
               <div
                 className={`card card-${idx + 1}`}
                 style={{ backgroundColor: c }}
               >
                 Tarjeta {idx + 1}
               </div>
             </Link>
           );
         })}
       </div>
     );
   };

   El componente Link se utiliza para crear enlaces a las páginas de las tarjetas individuales, y la propiedad to se utiliza para especificar la ruta y el estado que se pasará al componente Card.

3. Abre el archivo src/components/Card.js e importa los módulos necesarios:

   import React from "react";
   import { useParams, useLocation } from "react-router-dom";

4. Agrega el código para renderizar la página de la tarjeta individual:

   export const Card = () => {
     const { id } = useParams();
     const { state } = useLocation();
   
     return (
       <div
         className="page card-page"
         style={{ backgroundColor: state.bgColor }}
       >
         <p>Tarjeta {id}</p>
       </div>
     );
   };

   El hook useParams se utiliza para recuperar el parámetro id de la URL, y el hook useLocation se utiliza para recuperar el objeto state que se pasó desde el componente Cards.

Ahora, has completado el proyecto. El resultado final se muestra en la siguiente captura de pantalla. Haciendo clic en la página de la tarjeta te llevará a la página de la lista de tarjetas, y haciendo clic en cada tarjeta te llevará a la página de la tarjeta individual.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.