Динамические маршруты и параметры

Preact, как легковесная альтернатива React, поддерживает мощные возможности маршрутизации через библиотеку preact-router. Работа с динамическими маршрутами и параметрами является ключевой для построения современных одностраничных приложений (SPA), позволяя создавать гибкую навигацию и адаптировать контент под разные состояния приложения.

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

В Preact маршруты задаются с помощью компонента <Router>, который импортируется из preact-router. Каждому маршруту соответствует компонент, который рендерится при совпадении пути:

import { h } from 'preact';
import Router from 'preact-router';
import Home from './Home';
import About from './About';

const App = () => (
    <Router>
        <Home path="/" />
        <About path="/about" />
    </Router>
);

Каждый маршрут имеет атрибут path, указывающий URL, на который он реагирует. При этом <Router> автоматически обрабатывает навигацию и рендерит соответствующий компонент.

Динамические сегменты пути

Динамические маршруты позволяют захватывать части URL как параметры. В preact-router это достигается с помощью двоеточия (:) в пути:

<Route path="/user/:id" component={UserProfile} />

Здесь :id — динамический сегмент. При переходе на /user/42 компонент UserProfile получит объект параметров через проп matches:

const UserProfile = ({ matches }) => {
    return <div>Пользователь ID: {matches.id}</div>;
};

Ключевой момент: matches содержит только значения динамических сегментов, определённых в маршруте, и позволяет использовать их для запроса данных или отображения контента.

Несколько динамических параметров

Маршруты могут включать несколько параметров, что позволяет строить более сложные URL:

<Route path="/blog/:category/:postId" component={BlogPost} />

Компонент получает объект matches с двумя полями:

const BlogPost = ({ matches }) => {
    return (
        <div>
            <h2>Категория: {matches.category}</h2>
            <p>Пост ID: {matches.postId}</p>
        </div>
    );
};

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

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

preact-router поддерживает опциональные параметры через символ ? и универсальные сегменты через *:

<Route path="/search/:query?" component={SearchResults} />
<Route path="/docs/*" component={Documentation} />

Опциональный параметр :query? делает параметр необязательным. /search и /search/javascript будут соответствовать одному маршруту.
Wildcard * захватывает оставшуюся часть URL как единый параметр. Например, /docs/getting-started/introduction будет передан компоненту Documentation через matches['*'].

Обработка параметров в жизненном цикле

В Preact компоненты маршрутов могут использовать стандартные хуки жизненного цикла. Часто параметры URL применяются для запроса данных:

import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';

const UserProfile = ({ matches }) => {
    const [user, setUser] = useState(null);

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

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

    return (
        <div>
            <h1>{user.name}</h1>
            <p>Email: {user.email}</p>
        </div>
    );
};

Применение useEffect с зависимостью от matches.id гарантирует повторный запрос данных при изменении маршрута.

Навигация с параметрами

Для программной навигации используется метод route из preact-router:

import { route } from 'preact-router';

const goToUser = (id) => {
    route(`/user/${id}`);
};

Это позволяет динамически изменять URL без перезагрузки страницы и обеспечивает плавную работу SPA.

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

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

<Router>
    <Dashboard path="/dashboard" />
    <DashboardSettings path="/dashboard/settings/:tab?" />
</Router>

Компонент DashboardSettings получает параметр tab, который позволяет открывать разные вкладки настроек без необходимости создавать отдельные маршруты для каждой.