7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Как работать с роутингом в React

Read Time: 3 mins

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

В одном из моих предыдущих туториалов, мы узнали, как начать работу с JSX и React. В этом туториале мы разберёмся как настроить и создать React приложение. А точнее, как использовать react-router в React приложении.

Начнём

Давайте начнём инициализируя наш проект с помощью пакетного менеджера Node (npm).

Установите необходимые для этого проекта библиотеки react и react-dom.

Мы будем использовать сборщик модулей webpack и webpack сервер для разработки. Установите webpack и webpack сервер для разработки.

Также мы будем использовать Babel для конвертации JSX синтаксиса в обычный JavaScript. Установите следующий babel пакет для вашего проекта.

webpack-dev-server необходим файл конфигурации, где мы будем указывать основной файл, который будет запускать приложение, файл для вывода и babel загрузчик. Вот как выглядит webpack.config.js:

Далее создайте app.html где React приложение будет рендериться.

Давайте создадим файл, который будет запускать приложение React - app.js.

Как видно в коде выше мы импортируем react и react-dom. Мы создали компонент без состояния (stateless), под названием App, который возвращает заголовок. Функция render отвечает за рендеринг компонента в app элементе, на странице app.html.

Запустим webpack сервер и приложение покажет нам сообщение о компоненте.

Откройте ваш браузер по адресу http://localhost:8080/app.html и вы должны увидеть работающее приложение.

Создание React представления (Views)

Теперь когда наше React приложение работает, давайте сделаем пару view для создания роутинга. Ничего сложного, мы даже поместим все компоненты в одном файле app.js.

Сделаем главный компонент под названием navigation в app.js.

Выше можно видеть Navigation component, там у нас находится заголовок приложения и только что созданное меню навигации для разных страниц приложения. Компонент не представляет ничего сложно, это обычный HTML код. Давайте создадим страницы для Contact и About.

Мы только что создали компонент, который будет рендерить About и Contact страницы.

Соединяем View с помощью react-router

Чтобы соединить view мы используем react-router. Установите react-router используя npm.

Импортируйте необходимые библиотеки react-router и app.js.

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

Давайте создадим роуты для страниц Home, Contact и About.

Когда пользователь посещает / роут, компонент Navigation рендерится, посетив /about отрендерится компонент About и открыв /contact рендерится компонент Contact.

Модифицируйте About и Contact страницы, добавив ссылку на домашнюю страницу. Чтобы создать ссылки для страниц, мы используем Link, которая работает также как ссылка (тег <a>) в HTML.

Модифицируйте Navigation компонент, чтобы добавить ссылки, которые будут вести на другие страницы, с домашней страницы.

Сохраните изменения и перезагрузите webpack сервер.

Откройте адрес http://localhost:8080/app.html, ваше приложение работает и роутинг реализован.

Заключение

В этом туториале мы узнали как создать React приложение и соединить различные компоненты используя react-router. Мы научились как определить различные роуты и добавить соответствующие ссылки с помощью react-router.

Использовали-ли вы react-router или другие библиотеки для роутинга? Сообщите нам в комментариях.

Исходники для этого туториала доступным на 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
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.