Средства маршрутизации внутри приложения. Пользователь может получить доступ к различным компонентам или частям или перейти к ним посредством взаимодействия (например, нажатия кнопки). Для сегодняшнего одностраничного приложения это одна из самых важных функций, и почти все приложения React/Angular/Vue используют маршрутизацию. Самое приятное то, что маршрутизация не требует обновления страницы!
Сегодня мы узнаем, как настроить и использовать маршрутизатор React в наших приложениях React.
Настройка маршрутизатора React:
Чтобы настроить реагирующий маршрутизатор, мы должны выполнить следующие шаги:
1) Сначала перейдите в командную строку (cmd) в Windows и создайте новый проект приложения реакции, используя create-реагировать-приложение, и перейдите в папку проекта.
2) Установите пакет react-router-dom с помощью npm.
Использование:
Теперь пришло время использовать маршрутизацию в нашем приложении. Следуй этим шагам:
1) Откройте файл app.js в папке src и импортируйте следующие модули из react-router-dom.
Здесь нам нужен BrowserRouter, который обеспечивает реализацию маршрутизатора для браузеров HTML5. Нам также нужна Link, которая заменяет наши теги привязки. Еще нам понадобится Route. Это дает нам доступ к компоненту условно на основе соответствия URL-пути. Последнее, что нам нужно, — это Switch. Его задача — вернуть только первый совпадающий маршрут, но не все совпадающие маршруты.
2) Оберните все компоненты в компонент приложения с помощью компонента Router, импортированного из dom react-router.
3) Сначала мы создадим несколько ссылок для наших компонентов, как показано ниже:
Цель состоит в том, чтобы всякий раз, когда мы нажимаем на ссылку, нам отображался соответствующий компонент.
4) Наконец, мы будем использовать компонент Switch для отображения компонента на основе выбранной ссылки. Route попытается сопоставить ссылку и предоставить компонент, а Switch предоставит первый соответствующий Route.
5) Теперь приложение ведет себя следующим образом:
Вот и все! Надеюсь, что это руководство поможет вам начать работу с React Router. Спасибо за чтение. Приятного обучения 😊
