Интеграция React-маршрутизации
Практический пример использования React Router.
Всем привет. Это моя первая профессиональная статья на этой платформе для блогов․ На самом деле написание этой статьи для меня большая радость, ведь этим я могу помочь людям услышать их мнение, а почему бы и не исправить их, если есть ошибки.
Все начинается с ошибок.
Эту статью я посвящаю 6-й версии пакета react-router-dom.
В своих первых работах я этому не научился. Но в настоящее время я узнал и решил поделиться своими знаниями.
Статья будет содержать цитаты из официальной документации
я шаг за шагом объясню и покажу фрагменты кода. Кроме того, я поделюсь
исходным кодом с GitHubи демо-версией проекта на Replit в Интернете. редактор. Ссылки будут в конце статьи.
Что такое React Router?
Из официальной документации
React Router – это полнофункциональная клиентская и серверная библиотека маршрутизации для React, библиотеки JavaScript для создания пользовательских интерфейсов. React Router работает везде, где работает React; в Интернете, на сервере с node.js и в React Native.
Давайте сделаем это…
Шаг 1. Первоначальная установка
Мы создадим базовое приложение для управления документами, которое должно работать с документами.
Приведенная выше команда настроит приложение React с typescript в папке document-manager.
Шаг 2. Настройте структуру папок
Все папки я создам внутри папки src.
Структура папок будет:
- компоненты: общие компоненты,
- страницы: компоненты для каждой страницы,
- активы: изображения, стили, шрифты и т. д.,
- навигация:все компоненты и вспомогательные функции для навигации по проекту,
- services: общие файлы служб,
- configs:файлы конфигурации,
- store: в этом каталоге можно сохранить всю функциональность, связанную с redux store.
Шаг 3. Установите зависимости и конфигурации
В этом проекте я буду использовать:
- yarn в качестве менеджера пакетов,
- antd в качестве библиотеки пользовательского интерфейса React,
- sassв качестве препроцессора стиля.
Мы должны добавить «baseUrl»в качестве свойства в файл tsconfig.json, чтобы обеспечить абсолютное разрешение файла. Это очень полезно, так как позволяет установить базовый каталог для разрешения неабсолютных имен модулей. После этого мы можем импортировать модули, начиная с «baseUrl». Я добавлю это свойство в свойство «compilerOptions».
"baseUrl": "./src",
Шаг 4. Что делать
Прежде чем начать, давайте зададим себе несколько вопросов:
Что это за приложение?
Это приложение предназначено для представления работы React Router, организации различных типов маршрутов. У нас будет несколько типов страниц, в том числе страницы, которые являются частью аутентификации, где у нас будет возможность узнать о частных и публичных маршрутах.
Какие маршруты у нас будут?
- /dashboard – панель управления.
- /auth/signin — страница входа
- /auth/signup — страница регистрации
- /documents — список всех документов
- /documents /create — создать документ
- /documents /edit/:documentId — редактировать документ по id
- /documents /view/:documentId — просмотр сведений о документе по id
Какие типы компонентов мы должны использовать и как?
Мы должны использовать основные компоненты страницы для отображения разных страниц путем маршрутизации. Например, аутентификация (вход/выход), информационная панель, документы и ненайденные страницы.
Что такое Макетный маршрут?
У нас должен быть компонент, который будет составлять наши маршруты в определенном макете. Использование этого маршрута компоновки не требуется. Это полезно в том случае, когда вы хотите иметь одинаковый макет для нескольких компонентов (страниц) или сделать наши маршруты приватными или общедоступными (с помощью разрешений).
Маршрут макета — родительский маршрут без пути, используемый исключительно для группировки дочерних маршрутов внутри определенного макета.
Шаг 5. Начните делать
Я покажу простые фрагменты кода с пояснениями, вы можете найти весь исходный код на GitHub.
После понимания всех ключевых частей приложения, давайте начнем.
Создание компонентов макета Внутри папки components/layout
В этом каталоге мы создадим компоненты макета, которые будут использоваться в навигации для обертывания других компонентов. Ниже приведен пример основного компонента макета, но таким образом вы можете создать свой собственный компонент макета.
<Navbar>— это настраиваемый компонент для панели навигации. Полный код находится в репозитории GitHub.
<Outlet>следует использовать в родительских элементах маршрута для отображения их дочерних элементов маршрута. Это позволяет отображать вложенный пользовательский интерфейс при отображении дочерних маршрутов. Если родительский маршрут точно соответствует, он будет отображать дочерний индексный маршрут или ничего, если индексного маршрута нет.
Создание компонентов страниц Внутри папки pages
Эти страницы мы должны добавить в нашу маршрутизацию.
- Панель управления:панель управления зарегистрированными пользователями,
- Аутентификация.Эта папка содержит страницы авторизации (вход, регистрация),
- Документы:включает страницы для списка документов, создания, редактирования и подробного просмотра,
- Неизвестно:страница для 404 не найдена.
Создание собственного хука для авторизации внутри папки hooks
Давайте создадим хук useAuth,который предоставляет нам пользовательские данные и будет их обновлять.
Создание навигации внутри папки navigation
В этом каталоге у нас должно быть несколько файлов
- Navigation.tsx — здесь будут размещены все маршруты,
- PublicNavigation.tsx — расположение общедоступных маршрутов,
- PrivateNavigation.tsx — расположение приватных маршрутов,
- index.ts —из этого файла будут экспортированы все общедоступные компоненты.
Эти два компонента макета предназначены для проверки наличия у пользователя доступа к этой группе маршрутов с помощью перехватчика useAuth.
<Routes> и <Route> способы рендеринга чего-либо в React Router на основе текущего местоположения.
Приведенный выше код представляет полную группу маршрутов. После создания нашей навигации мы должны импортировать ее в компонент «App.tsx».
Кроме того, мы должны импортировать ‹BrowserRouter› в файл index.tsx.
Мы должны добавить BrowserRouter, чтобы использовать React Router в браузере и перемещаться с использованием стека истории браузера.
Подробнее читайте в официальной документации https://reactrouter.com/docs/en/v6/routers/browser-router
После этого мы можем запустить наш проект с помощью команды
Демонстрация проекта
Заключение
В этой статье я хотел показать практические примеры использования реактивного маршрутизатора. Но этот проект включает полные иллюстрации, а не только фрагменты кода о маршрутизации. Спасибо за прочтение, буду рад услышать ваше здоровое мнение․
Репозиторий проекта GitHub
Онлайн-редактор Replit
