Close

3 июля, 2021

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

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

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

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

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

React JS. Основы

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

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

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

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

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

Позволяет проверять и сопоставлять маршруты перед рендерингом. Это полезно в серверных фреймворках, таких как 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.

JavaScript
//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>
);

12345678910111213 //App.jsconst App = () => (  <BrowserRouter>    <div>      <Route path=»/messages» component={Message} />    </div>  </BrowserRouter>);//Message.jsconst Message = ({ match }) => (  <div>    <Route path={match.url + «/chat/:userId»} component={Chat} />  </div>);

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

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

Заключение

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

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

Автор: Chameera Dulanga

Источник: webformyself.com

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?