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

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

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

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

Каждый маршрут в Stencil может содержать часть URL, которая будет восприниматься как параметр. Например, в URL http://example.com/user/123 число 123 может быть параметром маршрута.

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

Для работы с параметрами маршрута в Stencil используется синтаксис, встроенный в описание маршрута. Параметры маршрута определяются через двоеточие (например, :id). Когда URL соответствует этому маршруту, параметр передается в компонент в виде свойства.

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

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

В этом случае компонент user-page будет загружаться при посещении URL, который соответствует шаблону /user/:id. Часть :id является параметром маршрута, который будет передан в компонент.

Доступ к параметрам маршрута

После того как маршрут с параметрами определен, доступ к параметрам можно получить внутри компонента через match свойство. Свойство match доступно в объекте props компонента. Это свойство содержит информацию о текущем маршруте, включая параметры, совпавшие с шаблоном.

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

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

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

  render() {
    const userId = this.match?.params?.id;
    return (
      <div>
        <h1>Профиль пользователя: {userId}</h1>
      </div>
    );
  }
}

В данном примере параметр id из URL будет извлечен и отображен на странице. Если URL будет, например, http://example.com/user/123, то на странице отобразится текст: “Профиль пользователя: 123”.

Необязательные параметры маршрута

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

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

В этом случае маршрут будет совпадать как с URL /user/123, так и с /user. Важно, что в случае отсутствия параметра id в URL, компонент должен корректно обрабатывать ситуацию, когда параметр не передан.

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

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

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

  render() {
    const userId = this.match?.params?.id;
    return (
      <div>
        <h1>{userId ? `Профиль пользователя: ${userId}` : 'Выберите пользователя'}</h1>
      </div>
    );
  }
}

Здесь, если параметр id отсутствует, на странице будет отображаться сообщение “Выберите пользователя”.

Режимы работы с параметрами маршрута

Stencil позволяет работать с параметрами маршрута в нескольких режимах:

  • Режим динамического маршрута: параметры передаются напрямую через URL, как это было показано в предыдущих примерах.
  • Режим статического маршрута: когда параметр не передается, а значение по умолчанию устанавливается в коде компонента или через настройки роутера.

С помощью этих режимов можно гибко настроить маршрутизацию в зависимости от требований приложения.

Взаимодействие с состоянием маршрута

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

Пример использования параметров для фильтрации данных:

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

@Component({
  tag: 'product-list',
  styleUrl: 'product-list.css',
  shadow: true,
})
export class ProductList {
  @Prop() match: any;

  get filteredProducts() {
    const category = this.match?.params?.category || 'all';
    return this.getProductsByCategory(category);
  }

  getProductsByCategory(category: string) {
    // Пример фильтрации продуктов по категории
    return products.filter(product => product.category === category);
  }

  render() {
    return (
      <div>
        <h1>Продукты категории: {this.match?.params?.category || 'Все'}</h1>
        <ul>
          {this.filteredProducts.map(product => (
            <li>{product.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

В этом примере компонент product-list использует параметр маршрута category для фильтрации списка продуктов. При изменении категории в URL, фильтрация обновляется автоматически, что позволяет поддерживать динамическую навигацию.

Множественные параметры маршрута

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

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

<Route url="/product/:category/:id" component="product-detail" />

В этом случае компонент product-detail будет загружаться при совпадении с URL, содержащим два параметра: category и id. Для доступа к этим параметрам будет использован тот же принцип, что и для одного параметра:

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

@Component({
  tag: 'product-detail',
  styleUrl: 'product-detail.css',
  shadow: true,
})
export class ProductDetail {
  @Prop() match: any;

  render() {
    const { category, id } = this.match?.params;
    return (
      <div>
        <h1>Детали продукта</h1>
        <p>Категория: {category}</p>
        <p>ID продукта: {id}</p>
      </div>
    );
  }
}

При переходе по URL, например, http://example.com/product/electronics/123, на странице отобразится информация о категории и ID продукта.

Перенаправление с параметрами

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

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

import { Redirect } from '@stencil/router';

<Redirect to={`/product/${category}/${id}`} />

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

Заключение

Работа с параметрами маршрута в Stencil позволяет эффективно передавать и использовать данные между компонентами. Благодаря гибкости маршрутизатора и синтаксису параметров можно легко строить динамичные и интерактивные веб-приложения.

Оглавление