Rails с React — одно репозиторий
Часть 2 из 3. Интеграция React Router
Подведение итогов
В первой части этой серии мы рассмотрели настройку React в качестве слоя представления.
Весь код этой серии находится по адресу: https://github.com/oddballio/rails-with-react.
Введение
Теперь, когда у нас есть подготовленный слой представления, теперь нам нужно иметь возможность посещать множество разных страниц в нашем приложении, каждая из которых имеет свое назначение. Например:
- домашняя страница
- страница, которая отображает список сообщений
- страница с формой для создания нового поста
Чтобы создать несколько компонентов React с несколькими уникальными URL-адресами, мы интегрируем React Router.
Создавать и импортировать новые компоненты
Давайте создадим компонент класса для представления каждой из этих страниц с некоторым шаблонным содержимым.
1. Создать app/javascript/components/Home.js
2. Создайте app/javascript/components/Posts.js
3. Создайте app/javascript/components/NewPost.js
4. Импортируйте компоненты в App.js
Установить и импортировать зависимости
1. Установите React Router и react-router-dom
$ yarn add react-router $ yarn add react-router-dom
2. В index.js импортируйте соответствующие компоненты пакета
Настройка маршрутизатора и маршрутов
Давайте интегрируем компоненты из этих новых пакетов.
1. В index.js вместо передачи компонента App мы будем передавать компонент Router пакета.
2. В компонент Router мы добавим компонент Route, который устанавливает корневой путь, с App.js в качестве нашего корневого компонента.
Создайте маршруты в приложении React
Поскольку App.js установлен в качестве корневого компонента для маршрутизатора, он будет содержать все отдельные маршруты для каждого компонента.
1. В App.js импортируйте компоненты Route и Switch из react-router-dom.
2. В App.js установите все уникальные маршруты в компоненте Switch.
Маршрут Umbrella Rails для всех маршрутов React
Нам нужно создать полный маршрут, который соответствует любому из потенциальных маршрутов, которые могут исходить из нашего приложения React, и направить их в наше действие pages_controller#index. Это действие, которое отображает наше приложение React.
Важно! Этот маршрут match должен быть последним маршрутом в routes.rb, чтобы гарантировать, что он по ошибке не поглощает другие маршруты.
1. В routes.rb создайте полный маршрут
2. Запустите сервер rails с помощью rails s
3. В отдельной вкладке запустите скрипт bin/webpack-dev-server
$ bin/webpack-dev-server
Это настраивает перезагрузку в реальном времени, которая является стандартной для базового приложения React.
4. Посетите http://localhost:3000
Вы должны увидеть «Главную страницу»
5. Посетите http://localhost:3000/posts
Вы должны увидеть «Страницу сообщений»
6. Посетите http://localhost:3000/new_post
Вы должны увидеть «Страница NewPost»
Дальнейшие шаги
В этой серии есть еще один мастер-класс:
