Dynamisk Routing med Forum-app 💬

Modulsmål 🎯

Efter denna modul kan du:

• ✅ Skapa dynamiska routes med [param] syntax
• ✅ Bygga nested routing strukturer
• ✅ Hantera URL-parametrar i load functions
• ✅ Förstå skillnaden mellan statiska och dynamiska routes

Från tutorial till praktik! 🚀

Nu ska vi använda allt du lärt dig - API endpoints, load functions, form actions och routing - för att bygga en riktig app: ett forum där användare kan skapa forum och skriva meddelanden!

Vad är dynamisk routing? 🤔

Statisk route:

/about          → src/routes/about/+page.svelte
/contact        → src/routes/contact/+page.svelte

Dynamisk route:

/user/123       → src/routes/user/[id]/+page.svelte
/blog/mitt-post → src/routes/blog/[slug]/+page.svelte
/forum/gaming   → src/routes/forum/[name]/+page.svelte

Den [name] delen fångar vad som helst och gör det tillgängligt som params.name!

Projektstruktur vi ska bygga 🏗️

/                           # Hemsida
/forums                     # Lista alla forum  
/forums/gaming              # Gaming-forumet (dynamisk!)
/forums/programming         # Programming-forumet (dynamisk!)

Data vi arbetar med

type Forum = {
  name: string;
  description: string;
  createdAt: Date;
};

type Message = {
  id: number;
  content: string;
  author: string;
  forumName: string;
  createdAt: Date;
};

Steg 1: Skapa projektet och datalagring 🛠️

Nytt projekt

npm create svelte@latest forum-app
cd forum-app
npm install
npm run dev

Skapa src/lib/forum-store.ts

// src/lib/forum-store.ts

let forums: string[] = []; // Håll det enkelt först

export function getAllForums() {
  return forums;
}

export function createForum(name: string) {
  // Din kod här - lägg till forum i listan
}

export function getForum(name: string) {
  // Din kod här - returnera true/false om forumet finns
}

// Lägg till fler funktioner för meddelanden...
let messages: string[] = [];

export function getMessagesForForum(forumName: string) {
  // Din kod här
}

export function createMessage(content: string, author: string, forumName: string) {
  // Din kod här
}

Start enkelt! 🎯

Börja med enkla arrayer. Du kan göra det mer avancerat senare!

Steg 2: Forum-översikt sidan 📋

Skapa /routes/forums/+page.svelte

<!-- src/routes/forums/+page.svelte -->
<script>
  export let data;
</script>

<h1>Forum Översikt</h1>

<!-- Lista alla forum här -->
{#each data.forums as forum}
  <!-- Länka till varje forum -->
  <a href="/forums/{forum}">Forum: {forum}</a>
{/each}

<!-- Form för att skapa nytt forum -->
<form method="POST" action="?/create">
  <!-- Lägg till input-fält här -->
  <input type="text" name="name" placeholder="Forum-namn..." />
  <button type="submit">Skapa forum</button>
</form>

Skapa /routes/forums/+page.server.ts

// src/routes/forums/+page.server.ts
import type { PageServerLoad, Actions } from './$types';
// Importera dina funktioner från forum-store här

export const load = (({ request, params }) => {
  // Vad ska du returnera för att visa alla forum?
  
}) satisfies PageServerLoad;

export const actions = {
  create: async ({ request }) => {
    // Hantera skapandet av nytt forum här
    // Tips: använd request.formData() för att få form-data
  }
} satisfies Actions;

Mappstruktur 📁

src/routes/
├── forums/
│   ├── +page.svelte          # Lista alla forum
│   ├── +page.server.ts       # Server-logik för forum-lista
│   └── [forum]/              # Dynamisk route!
│       ├── +page.svelte      # Visa specifikt forum
│       └── +page.server.ts   # Server-logik för specifikt forum

Steg 3: Dynamisk route för enskilda forum 🎯

Skapa /routes/forums/[forum]/+page.svelte

<!-- src/routes/forums/[forum]/+page.svelte -->
<script>
  export let data;
</script>

<!-- Breadcrumb navigation -->
<nav>
  <a href="/forums">Alla Forum</a> > {data.forumName}
</nav>

<h1>Forum: {data.forumName}</h1>

<!-- Lista meddelanden -->
{#each data.messages as message}
  <div class="message">
    <!-- Visa meddelande här -->
  </div>
{/each}

<!-- Form för nytt meddelande -->
<form method="POST" action="?/message">
  <!-- Lägg till input-fält för meddelande här -->
</form>

Skapa /routes/forums/[forum]/+page.server.ts

// src/routes/forums/[forum]/+page.server.ts
import type { PageServerLoad, Actions } from './$types';
import { error } from '@sveltejs/kit';

export const load = (async ({ params }) => {
  let forumName = params.forum; // Här får du URL-parametern!
  
  // Kontrollera om forumet finns
  // Om inte, använd: throw error(404, "Forum not found");
  
  // Returnera forum-data och meddelanden
  
}) satisfies PageServerLoad;

export const actions = {
  message: async ({ request, params }) => {
    let forumName = params.forum;
    
    // Hantera nya meddelanden här
    // Tips: få form-data med request.formData()
  }
} satisfies Actions;

Viktiga koncept 🧠

1. URL-parametrar

// URL: /forums/gaming
// I [forum] route får du:
params.forum === "gaming"

// URL: /user/123/posts
// I [userId] route:
params.userId === "123"

2. Error handling

export const load = (async ({ params }) => {
  const forum = getForum(params.forum);
  
  if (!forum) {
    throw error(404, "Forum inte hittat");
  }
  
  return { forum };
}) satisfies PageServerLoad;

3. Mapping-struktur

✅ [forum] mappar till params.forum
✅ [userId] mappar till params.userId  
✅ [slug] mappar till params.slug

Uppgifter att lösa själv 📝

Grundnivå:

1. Få forum-listan att fungera

   • Visa alla forum på /forums
   • Skapa nya forum med formulär

2. Få dynamiska routes att fungera

   • Visa meddelanden för specifikt forum
   • Hantera 404 om forum inte finns

Mellannivå:

3. Lägg till meddelande-funktionalitet

   • Skriva nya meddelanden
   • Visa författare och tid

4. Förbättra UX

   • Breadcrumb navigation
   • Form validation
   • Snygga till med CSS

Expertnivå:

5. Avancerade features
   • Ta bort meddelanden
   • Redigera meddelanden
   • Sök inom forum

Vanliga problem 🔧

❌ "Cannot read property 'forum' of undefined"

Kontrollera: Mapphierarkin och att params finns

❌ 404-fel på forum-sidor

Kontrollera:

• Mappnamnet är [forum] med hakparenteser
• Filen heter +page.svelte (med +)

❌ Form actions fungerar inte

Kontrollera:

• action="?/message" (relativ path)
• Action finns i +page.server.ts

Tips 💡

1. Börja enkelt - få grundfunktionalitet att fungera först
2. Testa ofta - kör npm run dev och testa i browsern
3. Använd console.log - debugga med utskrifter
4. Läs felmeddelanden - de berättar ofta vad som är fel

Kom ihåg! 🎓

• [param] mappar mot params.param
• throw error(404) för sidor som inte finns
• Filnamn måste börja med + i SvelteKit
• use:enhance för smidigare forms

Nästa steg 🚀

När du har grundfunktionaliteten klar, i nästa modul tittar vi på databaser så du kan spara data permanent istället för i minnet!

Resurser 📚

• SvelteKit Routing: kit.svelte.dev/docs/routing
• Params Tutorial: learn.svelte.dev/tutorial/params
• Error Handling: kit.svelte.dev/docs/errors