Stencil Router

Stencil Router — это часть фреймворка Stencil, предназначенная для создания маршрутизации в приложениях. Он позволяет легко управлять навигацией между компонентами в одностраничных приложениях (SPA), сохраняя высокую производительность и минимальный размер бандла. Stencil Router реализует принцип работы с маршрутами, предоставляя возможности для динамического обновления контента в зависимости от текущего состояния URL.

Основы работы Stencil Router

В основе Stencil Router лежат компоненты, которые обрабатывают изменения URL и отображают соответствующий контент. Стандартная схема маршрутизации в Stencil основана на использовании компонента <stencil-router>, который управляет переходами между различными страницами или компонентами.

Установка Stencil Router

Stencil Router включён в сам фреймворк Stencil, и его не нужно устанавливать отдельно. Чтобы начать использовать маршрутизацию, достаточно подключить компонент <stencil-router> в корневом элементе вашего приложения.

Пример базовой структуры компонента приложения с маршрутизатором:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.css',
  shadow: true
})
export class MyApp {
  render() {
    return (
      <stencil-router>
        <stencil-route url="/" component="home-page" exact={true}></stencil-route>
        <stencil-route url="/about" component="about-page"></stencil-route>
      </stencil-router>
    );
  }
}

В этом примере маршрутизатор <stencil-router> используется для управления двумя страницами: “home-page” и “about-page”. Атрибут url задаёт путь для маршрута, а атрибут component указывает, какой компонент будет отображён при совпадении URL.

Навигация и переходы

Для управления переходами между страницами можно использовать компонент <stencil-route-link>. Этот компонент позволяет создавать ссылки, которые меняют URL, но не перезагружают страницу.

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

<stencil-route-link url="/about">Перейти на страницу "О нас"</stencil-route-link>

При клике на ссылку произойдёт переход на страницу с маршрутом /about, и содержимое компонента, соответствующего этому маршруту, отобразится.

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

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

<stencil-router>

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

<stencil-route>

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

Атрибуты компонента:

  • url: путь, который должен соответствовать текущему URL.
  • component: компонент, который будет отрендерен при совпадении URL.
  • exact: указывает, что маршрут должен быть точным, и только при точном совпадении с URL будет выполнен рендеринг компонента.

Этот компонент используется для создания ссылок, которые могут быть использованы для навигации по маршрутам без перезагрузки страницы. Он работает аналогично стандартным HTML-ссылкам, но использует логику маршрутизатора для обработки переходов.

Атрибуты компонента:

  • url: путь, на который будет осуществлён переход.

<stencil-route-switch>

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

<stencil-route-switch>
  <stencil-route url="/" component="home-page" exact={true}></stencil-route>
  <stencil-route url="/about" component="about-page"></stencil-route>
</stencil-route-switch>

В этом примере только один из маршрутов будет активен в зависимости от текущего URL.

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

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

Использование параметров в URL

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

<stencil-route url="/user/:id" component="user-page"></stencil-route>

В этом случае, при переходе на URL /user/123, компонент user-page будет отображён, а параметр id можно получить в компоненте:

@Component({
  tag: 'user-page',
  styleUrl: 'user-page.css',
  shadow: true
})
export class UserPage {
  @Prop() match: MatchResults;

  render() {
    const userId = this.match.params.id;
    return (
      <div>
        <h1>Пользователь {userId}</h1>
        {/* Отображение данных пользователя */}
      </div>
    );
  }
}

Здесь this.match.params.id позволяет получить значение параметра id, переданного через URL.

Опциональные параметры

Если параметр в URL может быть опциональным, можно использовать следующий синтаксис:

<stencil-route url="/user/:id?" component="user-page"></stencil-route>

В этом случае, при отсутствии параметра id компонент всё равно будет отрисован, но значение this.match.params.id будет undefined.

Защищённые маршруты

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

Пример защищённого маршрута:

<stencil-route
  url="/dashboard"
  component="dashboard-page"
  routeRender={(route) => {
    if (!isUserAuthenticated()) {
      return <redirect-to-login />;
    }
    return <dashboard-page />;
  }}
></stencil-route>

В этом примере, если пользователь не авторизован, его перенаправит на страницу входа.

Использование History API

Stencil Router использует стандартный браузерный History API для работы с изменением URL. Это позволяет интегрировать маршрутизацию с браузером, поддерживая такие функции, как кнопки “Назад” и “Вперёд”. История навигации будет хранить все изменения URL, что позволяет пользователю вернуться на предыдущую страницу или перейти на новую без перезагрузки приложения.

Ленивая загрузка компонентов

Stencil Router поддерживает ленивая загрузка (lazy loading) компонентов для оптимизации производительности. Это позволяет загружать компоненты только по мере необходимости, что снижает начальный размер бандла и ускоряет загрузку страницы.

Чтобы использовать ленивую загрузку, достаточно добавить атрибут component с указанием компонента, который должен быть загружен динамически:

<stencil-route url="/dashboard" component="lazy-dashboard-page"></stencil-route>

Когда пользователь впервые перейдёт на маршрут /dashboard, компонент lazy-dashboard-page будет загружен асинхронно.

Заключение

Stencil Router предоставляет удобные и мощные инструменты для реализации маршрутизации в приложениях на основе Stencil. Он поддерживает динамические параметры, защиту маршрутов, лейзи-загрузку компонентов и другие важные возможности, которые делают разработку современных SPA более гибкой и эффективной.

Оглавление