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

У каждой статьи блога свой адрес: /blog/hello-svelte, /blog/runes. Создавать папку под каждую статью неудобно. Вместо этого делают динамический маршрут: часть адреса в квадратных скобках становится параметром, и одна страница обслуживает все такие адреса.

Папка с параметром

Создайте папку src/routes/blog/[slug] — квадратные скобки входят в имя папки. В ней создайте серверный файл:

// src/routes/blog/[slug]/+page.server.js
import { getPost } from '$lib/server/posts.js';
 
export function load({ params }) {
  const post = getPost(params.slug);
  return { post };
}

Для адреса /blog/runes значение params.slug равно строке 'runes'. Имя свойства совпадает с текстом в скобках: папка [id] дала бы params.id.

Страница статьи

Рядом положите +page.svelte:

<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  let { data } = $props();
</script>
 
<article>
  <h1>{data.post.title}</h1>
  <p>{data.post.body}</p>
</article>
 
<a href="/blog">Все статьи</a>

Откройте /blog и щёлкните по заголовку — откроется страница статьи с её текстом. Ссылки вида href="/blog/{post.slug}" в списке мы уже написали в прошлом уроке.

Статья не найдена

Для адреса /blog/nothing функция getPost вернёт undefined, и страница сломается на data.post.title. Правильно ответить ошибкой 404 функцией error из пакета @sveltejs/kit:

// src/routes/blog/[slug]/+page.server.js
import { error } from '@sveltejs/kit';
import { getPost } from '$lib/server/posts.js';
 
export function load({ params }) {
  const post = getPost(params.slug);
 
  if (!post) {
    error(404, 'Статья не найдена');
  }
 
  return { post };
}

Теперь /blog/nothing покажет стандартную страницу ошибки с кодом 404 и текстом «Статья не найдена». Как оформить такую страницу по-своему — в уроке об ошибках. Функция error сама прерывает выполнение load, поэтому throw перед ней в SvelteKit 2 не пишут.

Другие виды параметров

Параметры всегда приходят строками. Если в адресе число, превратите его сами: Number(params.id).

Частая ошибка

Читать параметр под другим именем. Папка называется [slug], а в коде написано params.id — значение будет undefined, getPost ничего не найдёт, и любая статья откроется как 404. Имя после params. всегда должно совпадать с текстом в квадратных скобках имени папки.