От автора: маршрутизация — это тема, с которой большинство из нас знакомо. Однако фреймворки SPA и библиотеки маршрутизации используют различные методы. Два таких подхода — статическая и динамическая маршрутизация. Такие фреймворки, как Angular, Ember и библиотека React Router (в прошлом) поддерживали статическую маршрутизацию.
Но недавно React Router представил динамическую маршрутизацию для устранения некоторых основных ограничений статической маршрутизации.
Как разработчики, мы должны знать об обоих этих методах, и эта статья даст вам все необходимые ответы о статической и динамической маршрутизации в React.
Статическая маршрутизация не умерла: есть много причин для ее использования. При статической маршрутизации вам необходимо определить все маршруты в централизованном месте вашего приложения. Затем эти маршруты будут импортированы на верхний уровень приложения, прежде чем оно начнет рендеринг.
Более ранние версии react-router и такие фреймворки, как Angular, Ember, используют статическую маршрутизацию. Если мы рассмотрим Angular в качестве примера, его файл app-routing.module.ts будет содержать все маршруты и соответствующие компоненты.
JavaScript import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’; import { HeroesComponent } from ‘./heroes/heroes.component’; const routes: Routes = [ { path: ‘component1’, component: Component1 } , { path: ‘component2’, component: Component2 } , { path: ‘component3’, component: Component3 } , ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
export class AppRoutingModule { }
| 123456789101112 | import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’; import { HeroesComponent } from ‘./heroes/heroes.component’; const routes: Routes = [ { path: ‘component1’, component: Component1 } , { path: ‘component2’, component: Component2 } , { path: ‘component3’, component: Component3 } ,]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
Затем этот файл импортируется в app.module.ts до выполнения рендеринга приложения. Хотя React перешел от статической к динамической маршрутизации, это не означает, что статическая маршрутизация мертва. Бывают ситуации, когда статическая маршрутизация действительно полезна. Например:
Почему нельзя использовать HTML-закладки на одностраничных сайтах
Она позволяет связывать маршруты по имени.
Подходит для статического анализа.
Позволяет проверять и сопоставлять маршруты перед рендерингом. Это полезно в серверных фреймворках, таких как Express.
Она загружает данные в жизненном цикле перед рендерингом следующего экрана.
Помимо всего этого, React по-прежнему предоставляет библиотеку статической маршрутизации, которая называется response-router-config, для использования в таких ситуациях.
Тогда почему React вообще перешел на динамическую маршрутизацию? Не волнуйтесь. Вы найдете ответ в следующем разделе.
Динамическая маршрутизация: способ работы в React
Основное различие между статической и динамической маршрутизацией — это время, когда выполняется маршрутизация. При динамической маршрутизации маршруты инициализируются динамически при отображении страницы. Это означает, что почти все является компонентом в React Router.
В динамической маршрутизации есть несколько интересных концепций. Давайте обсудим некоторые из них, чтобы понять связь между динамической маршрутизацией и React.
Динамическая маршрутизация позволяет условно отрисовывать ваши компоненты React. React побуждает разработчиков использовать компоненты как фундаментальные строительные блоки веб-приложений. Это позволяет нам отображать отдельные компоненты на одной странице в зависимости от условий, которые нам подходят.
Благодаря динамической маршрутизации мы можем использовать изменения маршрута в качестве условий и отображать компоненты без полного изменения макетов или страниц.
Например, предположим, что требуется отобразить список сообщений и открыть личный чат, когда пользователь выбирает сообщение из этого списка.
При динамической маршрутизации вы можете использовать один макет или веб-страницу с двумя компонентами (Message и Chat) для достижения этой цели. Во-первых, мы можем использовать компонент Message с маршрутом /messages для загрузки всех сообщений при загрузке страницы. Затем мы можем условно визуализировать компонент Chat, используя маршрут, например, /messages/chat/:userId для открытия окна чата.
Открытый чат, когда пользователь выбран на левой боковой панели
Это также можно назвать вложенной маршрутизацией, поскольку мы вкладываем маршруты внутри подкомпонентов.
Вложенные маршруты легко настроить
Вложенная маршрутизация не уникальна для динамической маршрутизации. Но с помощью динамической маршрутизации мы можем легко настроить маршрутизацию вложенности для наших приложений.
Если мы повторим тот же пример, есть два способа настроить маршруты. Я могу либо определить их обоих на одном уровне (например, в App.js), либо переместить маршрут компонента Chat в компонент Message.
JavaScript //App.js const App = () => ( );//Message.js const Message = ({ match }) => (
);
| 12345678910111213 | //App.jsconst App = () => ( );//Message.jsconst Message = ({ match }) => ( ); |
Здесь компонент приложения имеет только один маршрут. Когда пользователь перейдет к компоненту чата /messages, он будет смонтирован, и следующий маршрут будет определен как /chat/:userId. Когда пользователь перейдет по адресу /messages/chat/:userId, будет загружен компонент чата.
Точно так же есть много вещей, которых мы можем достичь с помощью динамической маршрутизации, и я думаю, что теперь у вас есть четкое представление о том, почему React выбрал динамическую маршрутизацию.
Заключение
В этой статье я попытался ответить на некоторые животрепещущие вопросы разработчиков о статической и динамической маршрутизации и о том, когда их выбирать.
Если рассматривать только React, у него есть немало причин для поддержки динамической маршрутизации вместо статической. Как я объяснил, в некоторых ситуациях по-прежнему требуется статическая маршрутизация, и поэтому React также предоставляет библиотеку под названием response-router-config. Спасибо за чтение!!!
Три CSS альтернативы навигации в JavaScript
Автор: Chameera Dulanga
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
Источник