Как сделать роутинг react

Обновлено: 07.07.2024

С помощью маршрутизации описываются ответы Node.js приложения на запросы, поступающие с клиентской стороны или другого сервера (в случае, если реализуется API) на конкретный URL.

Определение маршрутов¶

Рассмотрим пример структуры простого REST API.

URL, по которому будет осуществляться запрос;
обрабатывающую запрос функцию (принимает объект запроса и запрос ответа).

Передаваемые данные и информация об отправителе запроса содержится в объекта запроса, а с помощью объекта ответа формируется ответ на запрос.

При описании Node.js маршрутизации в URL допускается использование специальных символов. Так, символ ? , указывает на необязательность символа, за которым он следует.

Если необходимо указать необязательность группы символов, оберните их в круглые скобки.

Символ + означает, что предшествующий ему символ может повторяться в этом месте неограниченное количество раз.

Символ * означает, что на ее месте может быть абсолютно любая последовательность символов, не ограниченная по длине.

Также Node.js маршрутизация поддерживает при определении URL регулярные выражения.

При описании Node js маршрутизации важен порядок определения маршрутов. Запрос попадает в первый подходящий обработчик и дальше поиск уже не осуществляется.

Теперь все отправляемые на маршрут /api/users запросы (неважно, get, post или еще какой-нибудь другой) будут попадать в единый обработчик.

route()¶

Попрошу камнями не кидаться, ибо все когда то учились) Суть такова: пишу вишлист для себя и друзей, и застрял на кажется очень глупом моменте. Вложенный компонент - это хедер с табами для навигации и кнопкой выхода. Пока реализую каркас приложения, по этому авторизация происходит просто по loggedInUser/!loggedInUser. Собственно при клике на exit button диспатчится пустая строка в loggedInUser и history.push('/login'). В отладчике вижу, что и диспатч происходит и в хистори пушится локейшн, но почему то не условие рендеринга не выполнятся. Прошу помощи знающих людей. Предполагаю, что накосячил с роутингом где то, так как читал, что BrowserRouter почему то не используется, но без него вообще не работает ничего. В общем заранее спасибо!

Вложенный компонент(UPD: он рендерится в каждом из маршрутизируемых компонентов):

1 ответ 1

В общем то проблема была вовсе не в самом роутинге, а в условии редиректа.

Я попытался реализовать это на своей странице, но, похоже, это не сработало, вместо родительской страницы отображается вся новая страница.

Если он накладывается на фоновый (родительский) компонент, действительно ли вам нужно изменить путь маршрута? Если да, то мой ответ может быть неполным.

Для наложения просто поместите наложенный компонент внутри родительской функции рендеринга. Однако вы можете использовать родительское состояние, чтобы решить, будет ли отображаться дочерний элемент / наложение.

Это использует свойство в состоянии, называемое наложением, которое, вероятно, по умолчанию должно быть ложным. Затем просто используйте функцию в родительском компоненте, чтобы включить / выключить это. Вы можете передать этот переключатель в функцию наложения, чтобы закрыть наложение.

Да, я знаю, как сделать наложение, не меняя путь маршрута. Я просто хочу знать, как это сделать с маршрутами

Обработка стейта, исходящего от сервера, может действительно вызвать некоторые проблемы в React. Есть много вещей, о которых вы должны подумать при работе с асинхронными данными, таких как обновление, кэширование или повторная загрузка.

Вот тут-то и пригождается react-query. Он легко справляется с ними, а также предлагает простые решения для оптимистичного рендеринга, бесконечного скроллинга, пагинации и многого другого.

Вот небольшое демо того, что мы будем строить:

В этом уроке я предполагаю, что у вас установлена node . Прежде всего, создадим новое react приложение с помощью npx create-react-app . После этого установим react-query с помощью npm i --save react-query .

Для демонстрации того, как работает react-query, я буду использовать Json Placeholder API для создания простого блога.

Прежде всего, удалим весь шаблонный код в App.js и заменим его следующим кодом:

Exit fullscreen mode

Сначала определили функцию getPosts - она может включать в себя все, что угодно, если она возвращает асинхронную функцию.

В начале App() вызывается хук useQuery с идентификатором для данных, которые извлекаются, и с асинхронной функции getPosts.

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

Это в принципе все, что вам нужно знать, чтобы начать использовать react-query. Но давайте расширим этот пример, чтобы увидеть кэширование и обновление в действии!

Расширение приложения

Exit fullscreen mode

Теперь давайте добавим в App.js маршрутизатор, который сопоставляет маршруты / для Home.js и /post/:id для одной страницы поста.

Exit fullscreen mode

И наконец, я создам новый компонент components/Post.js для отображения данных одного поста. Объяснение будет следовать после кода.

Exit fullscreen mode

И это на самом деле весь код GIF, которую вы видели в начале поста.

Если вы начнете работать с react-query, я бы порекомендовал вам посмотреть react-query-devtools, чтобы иметь возможность просматривать state и кэш.

25 потоков по React, 12 по Redux, 4 по webpack, 10 по JavaScript и 5 по Backend. В 2019 году мы запустили новые курсы по Docker и Redis, в 2020 году — GraphQL и TypeScript, а также ввели курсы по вёрстке. В 2021 году — Next.js. Наша школа покрывает полный стек по профессиям Frontend и Fullstack-разработчик.

Программа курса

Неделя 1

+ Урок 1: Введение в React

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

Что такое React?
Что такое Virtual DOM?
Что такое reconciliation?
Алгоритм рендеринга React.

Конфигурация стартовой точки.
Настройка редактора для комфортной работы с React.
Подготовка браузера.

Что такое JSX?
Создание атомарных элементов.
Правила работы с JSX.

Что такое компонент?
Создание функциональных компонентов.
Композиция.
Популярные ошибки при работе с React-компонентами.

Практика

Научимся настраивать проект для разработки.
Конвертируем HTML & CSS разметку в полноценный React-компонент.
Сделаем первые полноценные компоненты с помощью React.

+ Урок 2: Работа с данными в React

Разработка становиться особо интересной с добавлением интерактива! В этом уроке мы научимся оживлять приложение динамикой. 🏎

Пропсы, потомки и контекст

Как работает поток данных в React?
Для решения каких задач нужны пропсы.
Правила применения пропс.
Популярные ошибки при работе с пропс.
Что такое потомки React?
Как пользоваться потомками правильно?
Знакомство с React контекст.
Когда применять контекст хорошо, а когда плохо?

Как работают React-хуки?
Разбор основных хуков: useState, useContext.

Что такое стейт?
Как правильно управлять состоянием компонента?
Популярные ошибки при работе с состоянием.

Практика

Наполним наши компоненты данными с помощью пропс и потомков.
Научимся правильно переиспользовать компоненты.
Оживим наши компоненты с помощью состояния.

Неделя 2

+ Урок 3: Работа с сетью в React

Фактически все приложения в интеренете в той или иной форме общаются с сервером. Мы на практике разберёмся как отправлять запросы на сервер 🛣. А так же оптимизируем наше приложение на максимальную производительность.

Выполнение логики на разных этапах жизненного цикла компонента с помощью хука useEffect.
Оптимизация производительности с помощью хуков useCallback и useMemo.

Введение в концепцию общения клиент-сервер.
Fetch API.
React Query.

Практика

Научимся оптимизировать приложение для максимальной производительности.
Наполним приложение реальными данными с сервера.

+ Урок 4: Роутинг в React

Не секрет, что полноценное приложение — это естественно, не одна страница, а целый комплекс! В этом уроке мы научимся связывать React-приложение в настоящий Single-Page Application (SPA) с помощью react-router.

Что такое SPA-приложение?
Как правильно использовать DOM-интерфейсы для клиентской навигации?
Концепт публичных и приватных страниц.
Лучшие практики при работе с навигацией в SPA.

Практика

Научимся создавать страницы в React-приложении.
Изучим особенности работы с приватными и публичными страницами.

Неделя 3

+ Урок 5: Грамотное составление форм в React приложении

Научившись азам создания базы для SPA, мы перейдём к изучению эффективых приёмов составления форм. Научимся не только создавать разные по сложности формы, но и управлять их состоянием, а также валидировать и оформлять их осмысленную композицию.

Нативный подход составления форм.
Создание форм с помощью библиотеки react-hook-form.
Валидация форм с помощью мощного валидатора yup.
Популярные ошибки при работе с формами.
Лучшие практики при работе с формами.

Практика

Научимся создавать простые формы.
Изучим особенности при работе со сложными формами.
Научимся валидировать формы.

+ Урок 6: Знакомство с MobX

MobX — это альтернативная библиотека для стейт-менеджмента по отношению к Redux. Библиотека MobX придерживается немного иного подхода в построении хранилищ и мутациям данных. С изучением этой библиотеки мы научимся выносить состояние компонента во внешние хранилища данных.

Что такое MobX?
Знакомство с базовой моделью обмена данных MobX - React.
Знакомство с observables и subscriptions.
MobX против Redux.
Лучшие практики применения MobX.

Практика

Подключим MobX к проекту.
Применим лучшие практики MobX.

Неделя 4

Персональный проект "Виджет погоды" на JavaScript, MobX, CSS-modules

Неделя 5

+ Урок 7: Знакомство с Redux

И вот, настало время научиться работать с централизованным состоянием в React-приложении. В этом уроке мы изучим ключевые аспекты связи React и Redux.

Что такое Redux и зачем он нужен в React-приложении?
Как правильно подключить Redux к React-приложению.
Объявления атомарных инструкций с помощью Action.
Описание бизнес-логики с помощью Reducer.
Управление состоянием с помощью Store.
Вызов действия внутри React-компонента.
Чтение Redux состояния внутри React-компонента.
Лучшие практики при работе с Redux.
Правильная композиция Redux-составляющей проекта.

Практика

Подключим Redux к React.
Научимся правильно работать с Redux в React-приложении.

+ Урок 8: Асинхронный Redux (бонус)

Научимся делать запросы к API с помощью перехватчика Redux Thunk и Redux Saga. Изучим особенности при работе с асинхронным кодом в React-приложении.

Отправка REST-запросов с помощью Redux Thunk.
Популярные ошибки при работе с асинхронными операциями.
Лучшие практики при работе с разными типами запросов.

Практика

Научимся загружать данные с удалённого API.
Научимся отправлять данные на удалённый API.

Неделя 6

+ Урок 9: Переход на TypeScript

Экосистема современного фронтенд давно перешла к использованию инструментов, делающих жизнь разработчиков (и не только) лучше. Один из таких инструментов — TypeScript. Вместе мы правильно настроим тайпскриптовый микроклимат проекта, чтобы TypeScript приносил пользу и помогал писать код.

Почему TypeScript?
Введение в статическую строгую типизацию.
Знакомство с базовыми типами и аннотациями.
Как правильно подключить TypeScript к React-проекту?
Как правильно переводить JavaScript React-приложение на TypeScript?
Лучшие практики использования TypeScript в React-приложении.

Практика

Подключим TypeScript к проекту.
Применим лучшие практики TypeScript.

+ Урок 10: Тестирование программного кода

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

Ключевые особенности концепции Test Driven Development (TDD).
Ключевые особенности концепции Behavioural Driven Development (BDD).
Что такое интеграционное тестирование?
Что такое end-to-end тестирование?
Знакомство с фреймворком для тестирования JavaScript Jest.
Тестирование React компонентов при помощи React Testing Library.
Тестирование React.
Тестирование Redux.
Тестирование MobX.

Практика

Покроем тестами React-составляющую приложения.
Покроем тестами Redux-составляющую приложения.
Покроем тестами MobX-составляющую приложения.

Неделя 7

+ Урок 11: Styled Components (видеоурок)

Существует два больших лагеря, скандирующих за стилизацию приложения через классический CSS и за стилизацию в JavaScript (CSS in JS). В данном уроке мы подробно разберём лучшее на данный момент решения для стилизации React-приложения посредством JavaScript — styled-components.

Что такое CSS in JS?
Чем хорош данный подход?
Каковы преимущества и недостатки по сравнению с классическим подходом стилизации через CSS-файлы?
Как составлять правильную композицию Styled-компонентов?
Как правильно применять Styled-компоненты с TypeScript?

Практика

Научимся секретным методологиям применения styled-components
Освоим лучшие практики при использовании данной библиотеки

Неделя 8

Персональный проект "Менеджер задач" на TypeScript, Redux, styled-components

Неделя 9

Групповой проект по Agile-методологии

Неделя 10

+ Подведение итогов основного обучения

Итоги работы над персональными проектами.

Персональный проект "Фитнес трекер" — стек на выбор

Выберите тариф участия

Без наставника

Миникурс по Git
10 live-занятий с записью
13 видеоуроков по работе с классами в React
Саппорт в общем чате
Домашки с проверкой
2 собственных проекта для портфолио
Групповой проект по Agile
Поддержка саппорт-менеджера
Финальное тестирование
Онлайн-сертификат
Доп. материалы для углубленного изучения
Исходные коды и презентации
Доступ к материалам курса 12 мес.
Карьерный блок:
Поможем оформить резюме
Подготовим к работе в компании

*оплата частями до 6 платежей

С наставником

Всё, что входит в тариф Без наставника, а также:
Персональный ментор
9 персональных сессий с ментором
Фидбек по домашкам
Дополнительный проект для портфолио
Референтные версии 3 персональных проектов
Неограниченный доступ к материалам курса
Карьерный блок:
Подготовим к работе на фрилансе
Поможем заработать на первом заказе

*оплата частями до 6 платежей

Скидка на стоимость курса! В течение 0 часов несколько секунд для вас действует специальное предложение.

Оформить участие

Куратор программы

Андрей Присняк

Ведущий разработчик в Лектруме. 7 лет опыта работы с крупными международными outsource- и outstaff-компаниями. 10 лет опыта ИТ-менторства.

Автор курсов по JavaScript, Backend, Docker и Redis.

Ответы на вопросы

➕ Какими необходимыми навыками я должен обладать перед началом курса? Для участия в курсе опыт коммерческой разработки не нужен. Но чтобы не возникало сложностей в процессе обучения, необходимо иметь базовые навыки работы с HTML и CSS, а также уверенно владеть JavaScript&ECMAScript. Если есть сомнения, напиши нам в чат-бот и получи тест для проверки знаний. ➕ Какая информация будет содержаться в сертификате, если я не буду разрабатывать персональные проекты? Онлайн-сертификат будет с информацией о прослушанном курсе, без оценки. ➕ Я очень хорошо знаю React и хочу быть у вас ментором. Да, это возможно. Мы с радостью с тобой будем сотрудничать, если у тебя 3+ года опыта в коммерческой разработке с инструментами данного курса, ты успешно прошёл наш тест и интервью c техническим руководителем курса. Напиши нам в чат-бот и получили ссылку на тест. Желаем удачи. ➕ Могу ли я перейти на пакет С наставником, если уже оплатил курс? Да, для этого нужно обратиться к нам в чат-бот и мы пришлём вам счет на доплату. ➕ Чем вы лучше других обучающих компаний? Во-первых, у нас большая экспертиза в образовании, во-вторых, мы очень фанатично относимся к качеству курса и менторской поддержки, а в третьих, мы не просто учим, а ежедневно пишем на том стеке, которому обучаем. Мы практики, теоретики, а еще идеалисты. ➕ Какой уровень скиллов у ваших экспертов курса?

Мы понимаем, какую важную функцию выполняет наставник в обучении и поэтому с нами сотрудничают преподаватели не ниже Senior-уровня и менторы не ниже Middle-уровня, которые во время обучения делятся своим опытом, лучшими практиками со студентами.

➕ У меня остались вопросы/Я всё ещё сомневаюсь. Оставьте заявку на получение бесплатной консультации и мы с удовольствием вас проконсультируем, посоветуем или просто пообщаемся.

Читайте также: