Advertisement
  1. Code
  2. React

Понимание вложенной маршрутизации в React

Scroll to top
Read Time: 4 min

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

React - это библиотека JavaScript, созданная Facebook для создания пользовательских интерфейсов. Если вы новичок в React, я бы рекомендовал прочитать одно из наших ранних руководств по началу работы с React. В этом уроке мы обсудим, как обрабатывать вложенную маршрутизацию в веб-приложении React.

Настройка приложения

Мы начнем с создания нашего веб-приложения React. Давайте создадим папку проекта, называемую ReactRouting. Внутри ReactRouting создайте файл под названием app.html. Ниже приведен файл app.html:

Внутри папки ReactRouting инициализируйте проект с помощью Node Package Manager (npm).

Введите подробные сведения о проекте или нажмите Enter для значений по умолчанию, и вы должны получить файл package.json внутри папки ReactRouting.

Установите зависимости react и react-dom с помощью npm.

Установите пакет babel с помощью npm и сохраните его в файле package.json.

Пакеты babel необходимы для преобразования JSX-кода в JavaScript. Создайте конфигурационный файл webpack для обработки конфигураций webpack. Вот как выглядит файл webpack.config.js:

app.js - это файл, в котором будет находиться наш код React. Создайте файл под названием app.js внутри папки ReactRouting. Импортируйте необходимые библиотеки react в app.js. Создайте компонент под названием App, имеющий div с некоторым текстом. Отрисуйте компонент с помощью метода render. Вот как выглядит основной файл app.js:

Перезагрузите сервер разработки webpack.

После перезапуска сервера вы сможете просмотреть приложение React, запущенное на http://localhost:8080/.

Обработка маршрутизации в React

Мы будем использовать react-router для реализации маршрутизации и вложенной маршрутизации. Во-первых, установите react-router в нашем проекте.

Теперь в нашем проекте установлен react-router. Давайте создадим пару представлений для реализации маршрутизации. Внутри файла app.js создайте два компонента с именем view1 и view2. Вот как выглядит код:

Создайте компонент Menu для отображения View1 и View2 при нажатии. Вот как это выглядит:

Давайте воспользуемся react маршрутизатором для отображения маршрута по умолчанию для нашего приложения. Сделайте компонент Menu маршрутом по умолчанию. Также определите маршрут для компонентов View1 и View2. Вот как это выглядит:

Сохраните указанные выше изменения и перезапустите сервер webpack. Вы должны увидеть вертикальное меню навигации, отображаемое на странице http://localhost:8080/webpack-dev-server/.

An example of the vertical navigation menuAn example of the vertical navigation menuAn example of the vertical navigation menu

Попробуйте щелкнуть по ссылкам View1 и View2 и перейти к соответствующим компонентам.

Вложенные маршруты в React

У нас уже есть компонент App, который отображает текст заголовка. Предположим, мы хотим, чтобы клик по меню отображал соответствующий вид, но мы хотим, чтобы он отображался внутри компонента App.

Мы хотим, чтобы меню навигации было доступно на всех страницах. Чтобы достичь этого, мы попытаемся вложить наши react компоненты View1 и View2 в компонент App. Поэтому всякий раз, когда визуализируется View1, он отображается внутри компонента App.

Теперь измените конфигурацию маршрутизатора и поместите конфигурацию маршрута View1 и View2 внутри маршрута компонента App.

Измените компонент App, чтобы вставить в него компонент Menu.

Чтобы отобразить вложенные маршруты внутри компонента App, мы добавим props.children в компонент App. Передайте props в качестве аргумента функции к компоненту App.

Давайте добавим еще один компонент Home в наше приложение.

Включите компонент Home во вложенном списке маршрутов.

Сохраните указанные выше изменения и перезапустите сервер, и вы сможете просматривать приложение. Нажмите на перечисленные пункты меню, и каждый, щелкнув по нему, должен будет отобразиться вложенным внутри компонента App.

The app nested in the App componentThe app nested in the App componentThe app nested in the App component

Подведем итоги

В этом учебном руководстве вы увидели, как реализовать вложенную маршрутизацию в приложении React с помощью react-router. Вы можете разрабатывать небольшие независимые компоненты, а затем использовать эти компоненты для создания более крупных приложений. Благодаря тому, что он позволяет создавать небольшие компоненты в больших приложениях, это делает React действительно мощным.

React становится одной из де-факто платформ для работы в Интернете. Чтобы его освоить есть много различных интересных обучающих ресурсов. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato.

Исходный код этого учебника доступен в GitHub. Расскажите нам о ваших предложениях и мыслях в комментариях ниже.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.