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

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

Объявление параметров маршрутов

Параметры маршрутов в Atomico задаются через двоеточие : в пути маршрута. Например:

import { c, route } from "atomico";

function User({ params }) {
    return <div>Пользователь с ID: {params.id}</div>;
}

User.props = {
    params: Object
};

const routes = [
    route("/user/:id", User)
];

В этом примере :id — это динамический параметр маршрута. Он автоматически доступен внутри компонента через объект params.

Ключевые моменты:

  • Имя параметра в пути (:id) должно совпадать с ключом в объекте params.
  • Можно использовать несколько параметров в одном маршруте: /user/:id/order/:orderId.
  • Параметры автоматически парсятся как строки, дополнительная обработка типа данных осуществляется вручную.

Доступ к параметрам в компоненте

В Atomico параметры маршрута передаются в компонент через props. Для их корректной работы рекомендуется объявлять props с типом Object или конкретной структурой. Пример с несколькими параметрами:

function Order({ params }) {
    return (
        <div>
            Пользователь: {params.userId} <br />
            Заказ: {params.orderId}
        </div>
    );
}

Order.props = {
    params: Object
};

При навигации по маршруту /user/42/order/7 компонент получит:

params = {
    userId: "42",
    orderId: "7"
};

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

Atomico позволяет задавать опциональные параметры с помощью знака вопроса ?.

route("/search/:query?", SearchComponent)
  • Если query присутствует в URL, оно будет доступно в params.
  • Если отсутствует, params.query будет undefined.
  • Полезно для маршрутов с фильтрацией или поиском, где параметр может быть необязательным.

Маршруты с регулярными выражениями

Для более сложной валидации параметров можно использовать регулярные выражения прямо в определении маршрута:

route("/product/:id(\\d+)", ProductComponent)
  • Этот маршрут сработает только если id состоит из цифр.
  • Если URL не соответствует шаблону, маршрут не будет активирован.

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

Параметры маршрута можно использовать не только для отображения данных, но и для загрузки ресурсов или выполнения API-запросов:

function Profile({ params }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetch(`/api/users/${params.id}`)
            .then(res => res.json())
            .then(data => setUser(data));
    }, [params.id]);

    if (!user) return <div>Загрузка...</div>;

    return <div>{user.name}</div>;
}
  • Параметры params реактивны: при изменении URL компонент автоматически получает новые значения.
  • Для реактивного отслеживания можно использовать useEffect с зависимостью от params.

Вложенные маршруты и параметры

Atomico поддерживает вложенные маршруты, и параметры могут передаваться сквозь вложенность:

const routes = [
    route("/dashboard", Dashboard, [
        route("user/:id", DashboardUser),
        route("settings/:tab?", DashboardSettings)
    ])
];
  • Внутренние компоненты получают params только для своей части маршрута.
  • Для объединения параметров родительских маршрутов нужно вручную передавать их через props или контекст.

Советы по использованию параметров

  1. Типизация параметров: использовать PropTypes или TypeScript для явного указания структуры params.
  2. Валидация: проверять данные параметров, особенно если они идут в API-запросы.
  3. Дефолтные значения: опциональные параметры удобно обрабатывать через оператор ??:
const page = params.page ?? 1;
  1. Реактивные переходы: при изменении параметра маршрута можно инициировать новые действия, такие как фильтрация списка или обновление контента, без перезагрузки страницы.

Примеры комплексного использования

route("/blog/:category/:postId?", BlogComponent)
  • category — обязательный параметр, определяет раздел блога.
  • postId — опциональный, если указан, отображается конкретная статья, иначе список статей.
function Blog({ params }) {
    if (params.postId) {
        return <Post id={params.postId} />;
    }
    return <PostList category={params.category} />;
}

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

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

Оглавление