Route matching

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

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

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

Структура маршрута

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

Пример базового маршрута:

<stencil-router>
  <stencil-route url="/" component="home-page" />
  <stencil-route url="/about" component="about-page" />
</stencil-router>

В данном примере при переходе по URL-адресам / и /about будут отображаться компоненты home-page и about-page соответственно. Это основной механизм работы маршрутизации.

Динамическое сопоставление маршрутов

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

Пример:

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

В этом случае, при переходе по адресу /user/123, значение id будет доступно внутри компонента user-profile как параметр.

Внутри компонента user-profile можно получить значение параметра следующим образом:

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

  render() {
    return <div>Profile ID: {this.match?.params.id}</div>;
  }
}

Здесь match.params.id будет содержать значение, переданное в URL, в данном случае это 123.

Обработка параметров маршрута

Маршруты в Stencil могут не только передавать параметры, но и обрабатывать их. Например, можно передавать несколько параметров в одном маршруте или использовать параметры как фильтры для загрузки данных.

Пример с несколькими параметрами:

<stencil-router>
  <stencil-route url="/product/:category/:id" component="product-details" />
</stencil-router>

В этом случае при переходе по URL /product/electronics/12345 параметры category и id будут переданы в компонент product-details.

В компоненте можно их получить следующим образом:

@Component({
  tag: 'product-details',
  styleUrl: 'product-details.css',
  shadow: true,
})
export class ProductDetails {
  @Prop() match: MatchResults;

  render() {
    return (
      <div>
        <h1>Category: {this.match?.params.category}</h1>
        <h2>Product ID: {this.match?.params.id}</h2>
      </div>
    );
  }
}

Навигация и активные маршруты

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

<stencil-route-link url="/about">About Us</stencil-route-link>

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

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

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

<stencil-router>
  <stencil-route url="/" component="home-page" exact />
  <stencil-route url="/about" component="about-page" />
</stencil-router>

В данном случае только точное совпадение с корневым маршрутом / активирует компонент home-page.

Группировка маршрутов

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

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

<stencil-router>
  <stencil-route url="/" component="home-page" />
  <stencil-route url="/profile">
    <stencil-route url="/settings" component="profile-settings" />
    <stencil-route url="/edit" component="profile-edit" />
  </stencil-route>
</stencil-router>

Здесь маршрут /profile является контейнером для двух вложенных маршрутов: /profile/settings и /profile/edit.

Защита маршрутов и редиректы

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

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

<stencil-router>
  <stencil-route url="/admin" component="admin-page" beforeEnter={() => checkAuth()} />
</stencil-router>

Если функция checkAuth() возвращает false, можно выполнить редирект на страницу входа, например, с использованием компонента <stencil-route-link>.

Сопоставление маршрутов и кэширование

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

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

<stencil-router>
  <stencil-route url="/product/:id" component="product-page" cache={true} />
</stencil-router>

Подведение итогов

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

Оглавление