Implementando Recursos de Navegação em React

Introdução

Neste projeto, você aprenderá como implementar funcionalidades de navegação em uma aplicação React. Você criará uma aplicação simples com uma barra de navegação e páginas que podem ser navegadas usando links.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto e instalar as dependências
• Como adicionar rotas e route matchers para habilitar a navegação dos menus na barra de navegação
• Como adicionar navegação da lista de cartões para cartões individuais

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar React Router para lidar com roteamento no lado do cliente (client-side routing)
• Criar links e navegar entre diferentes páginas em uma aplicação React
• Passar dados entre componentes usando o objeto state no React Router

Configurar o Projeto

Nesta etapa, você aprenderá como configurar o projeto e instalar as dependências necessárias.

Abra seu editor de código e navegue até o diretório do projeto.

├── 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

Em seguida, baixe as dependências usando o comando npm install no terminal, aguarde a conclusão do download das dependências e, em seguida, inicie o projeto usando o comando npm start.

Após o projeto iniciar com sucesso, clique em "Web 8080" para visualizá-lo em seu navegador.

Adicionar Rotas e Matchers de Rota

Nesta etapa, você aprenderá como adicionar rotas e route matchers para habilitar a navegação dos menus na barra de navegação.

1. Abra o arquivo src/index.js e importe os módulos necessários:

   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. Envolva o componente App com o componente BrowserRouter:

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

3. Abra o arquivo src/App.js e importe os componentes e módulos necessários:

   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. Adicione o menu de navegação e o componente Switch para lidar com as diferentes rotas:

   const App = () => {
     return (
       <div className="app">
         <header>
           <Link to="/" className="menu menu-1">
             homepage
           </Link>
           <Link to="/cards" className="menu menu-2">
             card page
           </Link>
         </header>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/cards" exact component={Cards} />
           <Route path="/cards/:id" component={Card} />
         </Switch>
       </div>
     );
   };

   O componente Switch garante que apenas uma rota seja renderizada por vez, e os componentes Route definem as diferentes rotas e os componentes correspondentes a serem renderizados.

Adicionar Navegação da Lista de Cartões para Cartões Individuais

Nesta etapa, você aprenderá como adicionar código para navegar da página da lista de cartões para as páginas de cartões individuais.

1. Abra o arquivo src/components/Cards.js e importe os módulos necessários:

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

2. Adicione o código para renderizar a lista de cartões com links para as páginas de cartões individuais:

   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 }}
               >
                 Card {idx + 1}
               </div>
             </Link>
           );
         })}
       </div>
     );
   };

   O componente Link é usado para criar links para as páginas de cartões individuais, e a propriedade to é usada para especificar o caminho e o estado a serem passados para o componente Card.

3. Abra o arquivo src/components/Card.js e importe os módulos necessários:

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

4. Adicione o código para renderizar a página do cartão individual:

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

   O hook useParams é usado para recuperar o parâmetro id da URL, e o hook useLocation é usado para recuperar o objeto state que foi passado do componente Cards.

Agora, você concluiu o projeto. O resultado final é mostrado na captura de tela a seguir. Clicar na página do cartão o levará para a página da lista de cartões, e clicar em cada cartão o levará para a página do cartão individual.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais labs no LabEx para aprimorar suas habilidades.