Jak SvelteKit określa routing?

Przez strukturę katalogów w src/routes/

Przez konfigurację w pliku routes.js

Przez decoratory w komponentach

Kurs Svelte i SvelteKit · Moduł 11: Routing w SvelteKit

Drakkar - SvelteKit Routing

2 min czytania · Zaktualizowano 13 sierpnia 2026

Udostępnij

W tej lekcji5

Witaj w porcie Hedeby! Drakkary wikingów są gotowe do wielkiej wyprawy. SvelteKit to nasz statek do budowy pełnych aplikacji fullstack!

Czym jest SvelteKit?

SvelteKit to framework fullstack dla Svelte:

Routing oparty na plikach
SSR, SSG, CSR
API routes
Form actions

W tej części świata płyniemy z SvelteKit 3 i Svelte 5.

Nowy projekt

npx sv create moja-wyprawa
cd moja-wyprawa
npm run dev

Kreator sv zapyta o szablon i dodatki (np. TypeScript). Konfiguracja SvelteKit, łącznie z adapterem, mieszka w vite.config.js - w SvelteKit 3 nie ma już osobnego pliku svelte.config.js.

Struktura katalogów

src/
├── routes/
│   ├── +page.svelte        # /
│   ├── +layout.svelte      # Layout dla wszystkich stron
│   ├── about/
│   │   └── +page.svelte    # /about
│   ├── warriors/
│   │   ├── +page.svelte    # /warriors
│   │   └── [id]/
│   │       └── +page.svelte # /warriors/123
│   └── api/
│       └── warriors/
│           └── +server.js   # /api/warriors
├── lib/                     # Wspólny kod, import przez #lib
│   └── components/
└── app.html
vite.config.js               # Konfiguracja Vite i SvelteKit

Podstawowa strona

<!-- src/routes/+page.svelte -->
<script>
  let name = 'Wiking';
</script>

<h1>Witaj, {name}!</h1>
<a href="/warriors">Zobacz wojowników</a>

Do przejścia na inną stronę wystarczy zwykły link <a href>. SvelteKit przechwyci kliknięcie i podmieni stronę bez przeładowania przeglądarki.

Nawigacja

<script>
  import { goto } from '$app/navigation';

  function goToWarriors() {
    goto('/warriors');
  }
</script>

<!-- Link -->
<a href="/warriors">Wojownicy</a>

<!-- Programatyczna nawigacja -->
<button onclick={goToWarriors}>Idź do wojowników</button>

Drakkar jest gotowy - płyniemy przez routing SvelteKit!

Kod do tej lekcji: App.svelte

<script>
  // Drakkar - Nawigacja po morzach SvelteKit
  // Symulacja struktury routingu

  let currentPath = $state('/');

  const routes = [
    { path: '/', name: 'Strona główna', icon: '' },
    { path: '/warriors', name: 'Wojownicy', icon: '' },
    { path: '/warriors/ragnar', name: 'Ragnar', icon: '' },
    { path: '/ships', name: 'Statki', icon: '' },
    { path: '/about', name: 'O nas', icon: 'ℹ' }
  ];

  function navigate(path) {
    currentPath = path;
  }
</script>

<main class="drakkar">
  <h1>Drakkar - SvelteKit Routing</h1>

  <section class="structure">
    <h2>Struktura folderów</h2>
    <pre>
src/routes/
├── +page.svelte          → /
├── +layout.svelte        → Layout
├── warriors/
│   ├── +page.svelte      → /warriors
│   └── [id]/
│       └── +page.svelte  → /warriors/:id
├── ships/
│   └── +page.svelte      → /ships
└── about/
    └── +page.svelte      → /about
    </pre>
  </section>

  <nav class="nav">
    {#each routes as route}
      <button
        class:active={currentPath === route.path}
        onclick={() => navigate(route.path)}
      >
        {route.icon} {route.name}
      </button>
    {/each}
  </nav>

  <section class="content">
    <h2>Aktualna ścieżka: {currentPath}</h2>

    {#if currentPath === '/'}
      <p>Witaj w krainie Wikingów!</p>
    {:else if currentPath === '/warriors'}
      <p>Lista wszystkich wojowników</p>
    {:else if currentPath === '/warriors/ragnar'}
      <p>Profil wojownika: Ragnar Lothbrok</p>
    {:else if currentPath === '/ships'}
      <p>Nasza flota Drakkarów</p>
    {:else if currentPath === '/about'}
      <p>O naszym klanie</p>
    {/if}
  </section>
</main>

<style>
  .drakkar {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: #0a1628;
    color: #b8d4f7;
    min-height: 100vh;
  }

  h1 {
    color: #4a90d9;
    text-align: center;
  }

  section {
    background: rgba(74, 144, 217, 0.1);
    border: 1px solid #4a90d9;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
  }

  h2 {
    color: #4a90d9;
    font-size: 1rem;
    margin-top: 0;
  }

  pre {
    background: rgba(0,0,0,0.5);
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    overflow-x: auto;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
  }

  button {
    padding: 0.5rem 1rem;
    background: #1e3a5f;
    color: #b8d4f7;
    border: 1px solid #4a90d9;
    border-radius: 4px;
    cursor: pointer;
  }

  button.active {
    background: #4a90d9;
    color: #0a1628;
  }

  .content {
    min-height: 100px;
  }
</style>

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Jak SvelteKit określa routing?

Zadania praktyczne w grze

Edytor kodu
Uzupełnij kod nawigacji