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

Динамическая маршрутизация лучше статической?

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

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

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

Статическая маршрутизация не умерла: есть много причин для ее использования.

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

Более ранние версии react-router и такие фреймворки, как Angular, Ember, используют статическую маршрутизацию.

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

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 перешел от статического к динамическому, это не означает, что статическая маршрутизация мертва. Бывают ситуации, когда статическая маршрутизация становится действительно полезной.

Например:

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

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

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

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

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

Это означает, что почти все является компонентом React Router.

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

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

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

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

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

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

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

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

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

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

//App.js
const App = () => (
  <BrowserRouter>
    <div>
      <Route path="/messages" component={Message} />
    </div>
  </BrowserRouter>
);
//Message.js
const Message = ({ match }) => (
  <div>
    <Route path={match.url + "/chat/:userId"} component={Chat} />
  </div>
);

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

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

Заключение

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

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

Спасибо за чтение !!!

Создавайте отличные дизайнерские системы и микро-интерфейсы

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

Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания и компоновки независимых компонентов, а также создания в одиночку или вместе с вашей командой.

Попробуйте →