Эй, разработчики!
Сегодня мы собираемся научиться маршрутизировать в нашем приложении для реагирования. Помните, как вы переходите с одной страницы на другую, используя теги привязки в HTML? Маршрутизация в реакции очень похожа на это! В зависимости от запроса пользователя — например, при нажатии на ссылку или кнопку — пользователь будет перенаправлен на новую страницу.
Обратите внимание, что React помогает нам создавать SPA — одностраничные приложения. Несмотря на то, что создается впечатление, что вы перенаправляете пользователя якобы на «новую страницу», это скорее разные компоненты, поскольку мы находимся в одностраничном приложении.
Ниже приведены четыре простых шага, которые вы должны выполнить, чтобы выполнить задачу маршрутизации! В конце я добавлю справочные статьи и документацию для более глубокого изучения. Не стесняйтесь проверить их для получения дополнительных знаний.
Шаг 1: Установка react-router-dom
Прежде чем использовать библиотеки маршрутизации в React, нам нужно установить пакет react-router-dom. Он содержит привязки, необходимые для использования реактивного маршрутизатора в нашем коде!
Введите эту команду в свой терминал, чтобы установить пакет react-router-dom
npm установить реакцию-маршрутизатор-дом.
Шаг 2: Импортируйте необходимые библиотеки.
Теперь мы импортируем библиотеки Route и Routes из установленного пакета.
Добавьте библиотеку BrowserRouter в свой файл index.js и заключите приложение в теги BrowserRouter.
BrowserRouter – это реализация маршрутизатора, использующая API истории HTML5 для синхронизации URL-адреса и пользовательского интерфейса.
Шаг 3: Добавьте маршруты в ваш App.js
После импорта библиотек добавьте маршруты в файл App.js. Основной синтаксис добавления маршрутов следующий:
Здесь первый маршрут имеет путь «/», который отображает компонент приложения.
Давайте создадим несколько компонентов и добавим их маршруты в наше пустое приложение для реагирования, чтобы вы могли лучше понять!
Мы создали четыре разных функциональных компонента: AbousUs, ContactUs, Home и Menu. Каждый из них просто возвращает заголовок с именем компонента для демонстрации.
Добавим маршруты! (Примечание. Чтобы добавить ссылку на компонент в элемент, вам придется импортировать элемент в приложение.)
Давайте посмотрим на результат кода, пока здесь:
Вы можете перемещаться между различными компонентами, изменяя URL-адрес, как указано в заданных маршрутах.
Шаг 4: Добавление ссылок
Так как мы уверены, что маршруты работают хорошо, мы сейчас добавим ссылки! Они похожи на теги привязки в HTML.
Убедитесь, что вы импортировали библиотеку Link, чтобы иметь возможность использовать тег Link в своем коде. Мы добавим приведенный ниже div над Routes в наш App.js.
Просто чтобы он выглядел немного красивее, мы добавим базовый CSS. Вы можете пропустить этот шаг, если вы просто следите за функциональностью маршрутизации, происходящей здесь.
При щелчке по разным ссылкам нижеследующий текст меняется, указывая на то, что происходит навигация между компонентами.
Вот оно! Ваша маршрутизация с Links завершена!
Вот несколько статей и документации, которые помогут вам узнать больше о маршрутизации в React.
