Реализация функций навигации в React

Введение

В этом проекте вы научитесь реализовывать навигационные функции в приложении React. Вы создадите простое приложение с панелью навигации и страницами, к которым можно перейти по ссылкам.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать проект и устанавливать зависимости;
• добавлять маршруты и маршрутные сопоставители для навигации по меню в панели навигации;
• добавлять навигацию из списка карточек в отдельные карточки.

🏆 Достижения

После завершения этого проекта вы сможете:

• использовать React Router для обработки клиентской маршрутизации;
• создавать ссылки и навигаться между разными страницами в приложении React;
• передавать данные между компонентами с использованием объекта state в React Router.

Настройка проекта

В этом шаге вы научитесь настраивать проект и устанавливать необходимые зависимости.

Откройте свой редактор кода и перейдите в директорию проекта.

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

Далее, загрузите зависимости с помощью команды npm install в терминале, подождите, пока зависимости будут загружены, а затем запустите проект с помощью команды npm start.

Как только проект успешно запустится, нажмите на "Web 8080", чтобы просмотреть его в браузере.

Добавить маршруты и сопоставители маршрутов

В этом шаге вы научитесь добавлять маршруты и маршрутные сопоставители для навигации по меню в панели навигации.

1. Откройте файл src/index.js и импортируйте необходимые модули:

   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. Оберните компонент App компонентом BrowserRouter:

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

3. Откройте файл src/App.js и импортируйте необходимые компоненты и модули:

   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. Добавьте меню навигации и компонент Switch для обработки различных маршрутов:

   const App = () => {
     return (
       <div className="app">
         <header>
           <Link to="/" className="menu menu-1">
             домашняя страница
           </Link>
           <Link to="/cards" className="menu menu-2">
             страница с карточками
           </Link>
         </header>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/cards" exact component={Cards} />
           <Route path="/cards/:id" component={Card} />
         </Switch>
       </div>
     );
   };

Компонент Switch гарантирует, что одновременно будет отображаться только один маршрут, а компоненты Route определяют различные маршруты и соответствующие компоненты для отображения.

Добавить навигацию из списка карточек в отдельные карточки

В этом шаге вы научитесь добавлять код для перехода со страницы списка карточек на страницы отдельных карточек.

1. Откройте файл src/components/Cards.js и импортируйте необходимые модули:

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

2. Добавьте код для отображения списка карточек с ссылками на страницы отдельных карточек:

   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 }}
               >
                 Карточка {idx + 1}
               </div>
             </Link>
           );
         })}
       </div>
     );
   };

Компонент Link используется для создания ссылок на страницы отдельных карточек, а проп to используется для указания пути и состояния, которое будет передано в компонент Card.

3. Откройте файл src/components/Card.js и импортируйте необходимые модули:

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

4. Добавьте код для отображения страницы отдельной карточки:

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

Хук useParams используется для извлечения параметра id из URL, а хук useLocation используется для извлечения объекта state, который был передан из компонента Cards.

Теперь вы завершили проект. Готовый результат показан на следующем скриншоте. Нажатие на страницу с карточками приведет вас на страницу списка карточек, а нажатие на каждую карточку приведет вас на страницу отдельной карточки.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.