Вложенные маршруты и параметры

В фреймворке Inferno маршрутизация строится вокруг компонента Router и вспомогательных компонентов Route и Link. Вложенные маршруты позволяют организовать иерархическую структуру приложения, где один маршрут может содержать дочерние маршруты. Это упрощает управление состоянием, отображением компонентов и позволяет создавать более гибкие интерфейсы.

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

import { Router, Route, Link } from 'inferno-router';

const App = () => (
  <Router>
    <Route path="/" component={MainLayout}>
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/profile" component={Profile} />
    </Route>
  </Router>
);

const MainLayout = ({ children }) => (
  <div>
    <header>Меню</header>
    <main>{children}</main>
  </div>
);

В этом примере MainLayout выступает как родительский компонент, а Dashboard и Profile являются дочерними маршрутами. При переходе на /dashboard или /profile содержимое main будет меняться, сохраняя общую структуру страницы.

Параметры маршрутов

Маршруты в Inferno поддерживают динамические сегменты, которые позволяют передавать данные через URL. Параметры обозначаются двоеточием (:) в пути маршрута.

<Route path="/users/:id" component={UserDetail} />

В компоненте UserDetail доступ к параметру осуществляется через объект props:

const UserDetail = ({ match }) => {
  const userId = match.params.id;
  return <div>ID пользователя: {userId}</div>;
};
  • match.params — объект, содержащий все динамические сегменты маршрута.
  • Каждый параметр можно использовать для загрузки данных с сервера, фильтрации или передачи в дочерние компоненты.

Вложенные маршруты с параметрами

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

<Route path="/users" component={UsersLayout}>
  <Route path=":id" component={UserDetail} />
</Route>

UsersLayout отвечает за общий каркас страницы пользователей, например список, а UserDetail выводит детальную информацию. При этом URL /users/42 передаст значение 42 как id в компонент UserDetail.

const UsersLayout = ({ children }) => (
  <div>
    <h2>Пользователи</h2>
    <div>{children}</div>
  </div>
);

Обработка необязательных и множественных параметров

Inferno поддерживает необязательные параметры, которые задаются с помощью ? в пути:

<Route path="/search/:query?" component={SearchPage} />
  • Если параметр отсутствует, match.params.query будет undefined.
  • Множественные параметры можно обрабатывать через регулярные выражения в пути или используя паттерны маршрутизатора.

Использование вложенных маршрутов для сложных интерфейсов

В крупных приложениях вложенные маршруты позволяют:

  1. Разделять каркас и содержимое страницы Родительский компонент может содержать меню, шапку и футер, а дочерние маршруты отвечают за динамическое содержимое.

  2. Создавать многоуровневую навигацию Например, админ-панель с секциями и подстраницами:

<Route path="/admin" component={AdminLayout}>
  <Route path="users" component={AdminUsers}>
    <Route path=":id" component={AdminUserDetail} />
  </Route>
  <Route path="settings" component={AdminSettings} />
</Route>
  1. Передавать параметры глубоко в иерархию компонентов Благодаря match.params, любой дочерний маршрут может получать данные из URL без дополнительного контекста.

Практические рекомендации

  • Дочерние маршруты следует размещать внутри родительского компонента через {children} для корректного рендеринга.
  • Параметры маршрута должны быть минимально специфичными, чтобы избежать коллизий путей.
  • Для сложных интерфейсов удобно комбинировать вложенные маршруты с Lazy Loading, загружая дочерние компоненты по мере необходимости.
  • При работе с динамическими параметрами рекомендуется проверять их наличие и корректность перед использованием, чтобы избежать ошибок в рендеринге.

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

Оглавление