Динамическая и статическая маршрутизация в React

Динамическая и статическая маршрутизация в React

От автора: маршрутизация — это тема, с которой большинство из нас знакомо. Однако фреймворки SPA и библиотеки маршрутизации используют различные методы. Два таких подхода — статическая и динамическая маршрутизация. Такие фреймворки, как Angular, Ember и библиотека React Router (в прошлом) поддерживали статическую маршрутизацию.

Но недавно React Router представил динамическую маршрутизацию для устранения некоторых основных ограничений статической маршрутизации.

Как разработчики, мы должны знать об обоих этих методах, и эта статья даст вам все необходимые ответы о статической и динамической маршрутизации в React.

Статическая маршрутизация не умерла: есть много причин для ее использования. При статической маршрутизации вам необходимо определить все маршруты в централизованном месте вашего приложения. Затем эти маршруты будут импортированы на верхний уровень приложения, прежде чем оно начнет рендеринг.

Более ранние версии react-router и такие фреймворки, как Angular, Ember, используют статическую маршрутизацию. Если мы рассмотрим Angular в качестве примера, его файл app-routing.module.ts будет содержать все маршруты и соответствующие компоненты.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Затем этот файл импортируется в app.module.ts до выполнения рендеринга приложения. Хотя React перешел от статической к динамической маршрутизации, это не означает, что статическая маршрутизация мертва. Бывают ситуации, когда статическая маршрутизация действительно полезна. Например:

Она позволяет связывать маршруты по имени.

Подходит для статического анализа.

Позволяет проверять и сопоставлять маршруты перед рендерингом. Это полезно в серверных фреймворках, таких как Express.

Она загружает данные в жизненном цикле перед рендерингом следующего экрана.

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

Тогда почему React вообще перешел на динамическую маршрутизацию? Не волнуйтесь. Вы найдете ответ в следующем разделе.

Динамическая маршрутизация: способ работы в React

Основное различие между статической и динамической маршрутизацией — это время, когда выполняется маршрутизация. При динамической маршрутизации маршруты инициализируются динамически при отображении страницы. Это означает, что почти все является компонентом в React Router.

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

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Благодаря динамической маршрутизации мы можем использовать изменения маршрута в качестве условий и отображать компоненты без полного изменения макетов или страниц.

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

При динамической маршрутизации вы можете использовать один макет или веб-страницу с двумя компонентами (Message и Chat) для достижения этой цели. Во-первых, мы можем использовать компонент Message с маршрутом /messages для загрузки всех сообщений при загрузке страницы. Затем мы можем условно визуализировать компонент Chat, используя маршрут, например, /messages/chat/:userId для открытия окна чата.

Динамическая и статическая маршрутизация в React

Открытый чат, когда пользователь выбран на левой боковой панели

Это также можно назвать вложенной маршрутизацией, поскольку мы вкладываем маршруты внутри подкомпонентов.

Вложенные маршруты легко настроить

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

Если мы повторим тот же пример, есть два способа настроить маршруты. Я могу либо определить их обоих на одном уровне (например, в App.js), либо переместить маршрут компонента Chat в компонент Message.

Здесь компонент приложения имеет только один маршрут. Когда пользователь перейдет к компоненту чата /messages, он будет смонтирован, и следующий маршрут будет определен как /chat/:userId. Когда пользователь перейдет по адресу /messages/chat/:userId, будет загружен компонент чата.

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

Заключение

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

Если рассматривать только React, у него есть немало причин для поддержки динамической маршрутизации вместо статической. Как я объяснил, в некоторых ситуациях по-прежнему требуется статическая маршрутизация, и поэтому React также предоставляет библиотеку под названием response-router-config. Спасибо за чтение!!!

Автор: Chameera Dulanga

Источник: blog.bitsrc.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

React JS с Нуля до Профи

React JS. Полное руководство для современной веб-разработки

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.