Определение маршрутов

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

Основы маршрутизации в Stencil

Stencil включает в себя встроенную поддержку маршрутизации, что позволяет легко создавать приложения с различными состояниями, зависимыми от URL. Для этого используется компонент <stencil-route>, который обрабатывает маршруты и отображает компоненты в зависимости от текущего URL.

Основной принцип маршрутизации в Stencil схож с традиционными SPA-фреймворками. Однако Stencil позволяет использовать маршруты без необходимости в сторонних библиотеках.

Структура компонента маршрута

Компонент <stencil-route> — это основной инструмент для работы с маршрутами в Stencil. Он проверяет текущий URL и отображает соответствующий компонент, если путь совпадает с заданным.

Пример базовой структуры маршрута:

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

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.css',
  shadow: true
})
export class MyApp {

  render() {
    return (
      <div>
        <stencil-router>
          <stencil-route url="/" component="home-page" exact={true}></stencil-route>
          <stencil-route url="/about" component="about-page"></stencil-route>
        </stencil-router>
      </div>
    );
  }
}

В этом примере компонент <stencil-router> оборачивает маршруты, а компоненты <stencil-route> определяют, какие компоненты рендерить в зависимости от URL. Параметр exact={true} используется для точного совпадения пути.

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

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

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

<stencil-route url="/profile/:username" component="profile-page"></stencil-route>

В данном примере маршрут захватывает параметр username из URL и передает его в компонент profile-page. В компоненте можно получить этот параметр с помощью пропса:

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

@Component({
  tag: 'profile-page',
  styleUrl: 'profile-page.css',
  shadow: true
})
export class ProfilePage {
  @Prop() username: string;

  render() {
    return (
      <div>
        <h1>Профиль пользователя: {this.username}</h1>
      </div>
    );
  }
}

С помощью параметров маршрута можно создавать динамичные страницы, которые адаптируются под данные, передаваемые через URL.

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

Stencil поддерживает вложенные маршруты, что позволяет создавать более сложные структуры страниц. Вложенные маршруты можно определить, используя компонент <stencil-route> внутри других компонентов маршрутов.

Пример вложенной маршрутизации:

<stencil-router>
  <stencil-route url="/" component="home-page" exact={true}></stencil-route>
  <stencil-route url="/profile/:username" component="profile-page">
    <stencil-route url="/settings" component="settings-page"></stencil-route>
  </stencil-route>
</stencil-router>

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

Обработка переходов и состояния маршрутов

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

Каждый маршрут имеет несколько свойств, таких как active, match, которые помогают отслеживать, активен ли маршрут в данный момент.

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

<stencil-route url="/" component="home-page" exact={true} onMa tch={() => console.log('Home route matched')}></stencil-route>
<stencil-route url="/about" component="about-page" onMa tch={() => console.log('About route matched')}></stencil-route>

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

Модификация маршрутов с использованием stencil-router

Для более сложных приложений можно использовать stencil-router с дополнительными настройками. Например, можно указать base, если приложение развернуто не в корне сайта, а в подкаталоге. Это нужно для корректной работы маршрутизации.

<stencil-router base="/my-app">
  <stencil-route url="/" component="home-page" exact={true}></stencil-route>
  <stencil-route url="/about" component="about-page"></stencil-route>
</stencil-router>

С помощью такого подхода можно адаптировать маршруты к различным окружениям, когда приложение развернуто не в корне домена.

Использование активных ссылок

Для того чтобы легко определить, какой маршрут активен, Stencil предлагает компонент <stencil-link>, который автоматически добавляет активный класс к ссылке, если текущий маршрут совпадает с указанным в ссылке.

Пример:

<stencil-link href="/" activeClass="active">Главная</stencil-link>
<stencil-link href="/about" activeClass="active">О нас</stencil-link>

В этом примере класс active будет автоматически добавлен к ссылке, если текущий путь соответствует заданному href.

Работа с редиректами

В Stencil можно настроить редиректы, чтобы перенаправить пользователя на другую страницу. Для этого используется компонент <stencil-route-redirect>.

Пример редиректа:

<stencil-route-redirect from="/old-url" to="/new-url"></stencil-route-redirect>

При посещении маршрута /old-url приложение автоматически перенаправит пользователя на /new-url. Этот механизм полезен, например, при изменении структуры URL или для работы с устаревшими маршрутами.

Резюме

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

Оглавление