Вложенные роуты

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

Основы роутинга в Atomico

Atomico использует собственный механизм роутинга, который реализуется с помощью компонента <Router>. Этот компонент управляет состоянием приложения в зависимости от текущего маршрута и позволяет обрабатывать переходы между различными состояниями интерфейса. Для определения маршрутов используется атрибут path, который указывает, какой компонент должен отобразиться при совпадении с текущим URL.

Пример простого маршрута:

import { html, useState, Router, Route } from "atomico";

function App() {
  return html`
    <${Router}>
      <${Route} path="/" render=${() => html`<h1>Главная</h1>`} />
      <${Route} path="/about" render=${() => html`<h1>О нас</h1>`} />
    </${Router}>
  `;
}

В данном примере указаны два простых маршрута: / для главной страницы и /about для страницы “О нас”. Каждый маршрут отображает соответствующий компонент.

Принципы вложенных маршрутов

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

В Atomico вложенные маршруты реализуются путем использования компонента <Route> внутри другого компонента <Route>. Вложенные маршруты будут отображаться, если родительский маршрут активен, и могут использовать параметры URL или передавать состояние в дочерние компоненты.

Пример вложенных роутов:

import { html, Router, Route } from "atomico";

function Dashboard() {
  return html`
    <div>
      <h2>Панель управления</h2>
      <${Router}>
        <${Route} path="overview" render=${() => html`<p>Обзор</p>`} />
        <${Route} path="settings" render=${() => html`<p>Настройки</p>`} />
      </${Router}>
    </div>
  `;
}

function App() {
  return html`
    <${Router}>
      <${Route} path="/" render=${() => html`<h1>Главная</h1>`} />
      <${Route} path="/dashboard" render=${() => html`<${Dashboard} />`} />
    </${Router}>
  `;
}

Здесь, когда пользователь переходит на маршрут /dashboard, он видит панель управления, а внутри этого компонента, в зависимости от текущего маршрута, отображаются дочерние компоненты с маршрутами /dashboard/overview и /dashboard/settings.

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

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

Пример использования параметров:

import { html, Router, Route } from "atomico";

function UserProfile({ params }) {
  return html`<h3>Профиль пользователя: ${params.id}</h3>`;
}

function App() {
  return html`
    <${Router}>
      <${Route} path="/user/:id" render=${(props) => html`<${UserProfile} {...props} />`} />
    </${Router}>
  `;
}

В данном примере маршрут /user/:id захватывает параметр id, который затем передается в компонент UserProfile. Это позволяет, например, показывать профили разных пользователей по их идентификаторам, изменяя только часть URL.

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

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

Пример вложенного маршрута с параметрами:

import { html, Router, Route } from "atomico";

function PostDetails({ params }) {
  return html`<h3>Детали поста ${params.postId}</h3>`;
}

function UserPosts({ params }) {
  return html`
    <div>
      <h2>Посты пользователя ${params.userId}</h2>
      <${Router}>
        <${Route} path="post/:postId" render=${(props) => html`<${PostDetails} {...props} />`} />
      </${Router}>
    </div>
  `;
}

function App() {
  return html`
    <${Router}>
      <${Route} path="/user/:userId" render=${(props) => html`<${UserPosts} {...props} />`} />
    </${Router}>
  `;
}

Здесь для маршрута /user/:userId/post/:postId будет отображаться компонент UserPosts, в который передается параметр userId, а внутри этого компонента будет отображаться дочерний маршрут с деталями поста, для которого уже передается параметр postId.

Преимущества вложенных роутов

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