Файловая маршрутизация

Маршруты в SvelteKit — это папки в src/routes. URL повторяет структуру каталогов, а +page.svelte — это страница.

«Структура папок — это и есть карта сайта.» Файловая маршрутизация убирает целый класс конфигурации.

SvelteKit использует файловую маршрутизацию: путь в URL определяется расположением папок внутри src/routes. Папка — это сегмент пути, а файл +page.svelte внутри неё — это страница, которая отрисуется по этому адресу. Файлы с префиксом + особенные: SvelteKit придаёт им роль (страница, лейаут, загрузчик, серверный эндпоинт).

Так, src/routes/+page.svelte — это главная страница (/), src/routes/about/+page.svelte — страница /about, а src/routes/blog/+page.svelte — /blog. Никакой ручной таблицы маршрутов: создал папку — появился путь.

  src/routes/
  +-- +page.svelte            ->  /
  +-- about/
  |     +-- +page.svelte       ->  /about
  +-- blog/
  |     +-- +page.svelte       ->  /blog
  |     +-- [slug]/
  |           +-- +page.svelte ->  /blog/любой-slug (динамический)
  +-- +layout.svelte           ->  общая обёртка для всех страниц

Динамические сегменты обозначаются квадратными скобками: папка [slug] поймает любой путь на её месте, а значение будет доступно как параметр. Так строятся страницы статей блога, профилей пользователей и подобное. Файл +layout.svelte задаёт общую обёртку (шапку, навигацию) для всех вложенных страниц — он рендерит дочерний контент через {@render children()}.

<!-- src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<nav><a href="/">Главная</a> <a href="/blog">Блог</a></nav>
<main>{@render children()}</main>

Навигация между страницами — это обычные ссылки <a href="...">. SvelteKit перехватывает клики и делает переход на клиенте без полной перезагрузки, подгружая только данные новой страницы. Это даёт ощущение SPA при серверном рендеринге первой загрузки.

Как это работает под капотом

На старте SvelteKit строит манифест маршрутов из дерева папок. При запросе он сопоставляет URL с этим деревом, учитывая динамические сегменты. Смоделируем сопоставление с параметром.

// Сопоставление URL с маршрутом, включая динамический [slug]
const routes = [
  { pattern: /^\/$/, name: 'home' },
  { pattern: /^\/blog$/, name: 'blog-list' },
  { pattern: /^\/blog\/([^/]+)$/, name: 'blog-post', param: 'slug' }
];
function match(url) {
  for (const r of routes) {
    const m = url.match(r.pattern);
    if (m) return { name: r.name, params: r.param ? { [r.param]: m[1] } : {} };
  }
  return { name: '404', params: {} };
}

console.log(match('/'));                 // home
console.log(match('/blog'));             // blog-list
console.log(match('/blog/svelte-rocks')); // blog-post, params {slug: 'svelte-rocks'}

Попробуй сам ▶ — вставь код в консоль браузера (F12 → Console) и нажми Enter, чтобы увидеть вывод.

Частые ошибки

• Забыть префикс + в +page.svelte. Без него файл не станет маршрутом.
• Путать +page.svelte и +layout.svelte. Первый — страница, второй — обёртка.
• Забыть {@render children()} в лейауте. Тогда вложенные страницы не отрисуются.

Best practices

• Отражайте структуру сайта в структуре папок — это самодокументируемо.
• Используйте [param] для динамических страниц вместо ручного парсинга URL.
• Выносите общую навигацию и обёртки в +layout.svelte.

Группы, ошибки и вложенные лейауты

Базовой схемы «папка — это путь» хватает надолго, но SvelteKit предлагает и более тонкие инструменты для растущего приложения. Вложенные лейауты позволяют каждой ветке маршрутов иметь свою обёртку: общий лейаут с шапкой на весь сайт, а внутри раздела админки — свой дополнительный лейаут с боковым меню. Группы маршрутов в круглых скобках, например (app) или (marketing), дают возможность разделить страницы по лейаутам, не добавляя лишнего сегмента в URL — папка-группа влияет на структуру, но не на адрес. Специальный файл +error.svelte задаёт, что показать, если в ветке маршрутов что-то пошло не так, и эти страницы ошибок тоже могут быть вложенными. Понимание этих средств приходит постепенно, по мере усложнения проекта, но знать об их существовании полезно сразу: когда вы упрётесь в потребность по-разному оформить разделы сайта или аккуратно обработать ошибки, вы будете знать, что инструмент для этого уже встроен.

Итог: маршрутизация SvelteKit основана на файлах: папки в src/routes задают пути, +page.svelte — страница, [slug] — динамический сегмент, +layout.svelte — общая обёртка.