Routing in Svelte

npm install svelte-spa-router

// src/routes.js
import Home from './routes/Home.svelte';
import About from './routes/About.svelte';
import ProductList from './routes/ProductList.svelte';
import ProductDetail from './routes/ProductDetail.svelte';
import NotFound from './routes/NotFound.svelte';

export const routes = {
  '/': Home,
  '/about': About,
  '/products': ProductList,
  '/products/:id': ProductDetail,  // Dynamic route parameter
  '*': NotFound  // 404 catch-all
};

<!-- App.svelte -->
<script>
  import Router from &#039;svelte-spa-router';
  import { routes } from &#039;./routes.js';
  import Navbar from &#039;./lib/Navbar.svelte';
</script>

<Navbar />
<main>
  <Router {routes} />
</main>

<!-- Navbar.svelte -->
<script>
  import { Link } from &#039;svelte-spa-router';
  import { link, active } from &#039;svelte-spa-router';
</script>

<nav>
  <!-- Using Link component -->
  <Link to="/">Home</Link>
  <Link to="/products">Products</Link>
  <Link to="/about">About</Link>

  <!-- Using href with the link action -->
  <a href="/" use:link>Home</a>
  <a href="/products" use:link>Products</a>
</nav>

<!-- Programmatic navigation -->
<script>
  import { push, pop, replace } from &#039;svelte-spa-router';

  function goToProducts() {
    push(&#039;/products');
  }

  function goBack() {
    pop();
  }
</script>

<button on:click={goToProducts}>View Products</button>
<button on:click={goBack}>← Back</button>

<!-- routes/ProductDetail.svelte -->
<script>
  import { onMount } from &#039;svelte';

  export let params = {}; // svelte-spa-router passes params here

  let product = null;
  let loading = true;

  $: productId = params.id;

  onMount(async () => {
    const res = await fetch(`https://fakestoreapi.com/products/${productId}`);
    product = await res.json();
    loading = false;
  });
</script>

{#if loading}
  <p>Loading product #{productId}...</p>
{:else if product}
  <div class="product-detail">
    <img src={product.image} alt={product.title} />
    <h1>{product.title}</h1>
    <p>${product.price}</p>
    <p>{product.description}</p>
  </div>
{/if}

src/
├── routes/
│   ├── Home.svelte
│   ├── Products.svelte
│   ├── ProductDetail.svelte
│   ├── About.svelte
│   └── NotFound.svelte
├── lib/
│   ├── Navbar.svelte
│   └── Footer.svelte
├── routes.js
└── App.svelte

<!-- routes/NotFound.svelte -->
<script>
  import { push } from &#039;svelte-spa-router';
</script>

<div class="not-found">
  <h1>404 — Page Not Found</h1>
  <p>The page you are looking for does not exist.</p>
  <button on:click={() => push(&#039;/')}>Go Home</button>
</div>

<script>
  import { location } from &#039;svelte-spa-router';
</script>

<nav>
  {#each [{path:'/', label:'Home'}, {path:'/products', label:'Products'}] as route}
    <a
      href={route.path}
      class:active={$location === route.path}
    >{route.label}</a>
  {/each}
</nav>

<style>
  .active { color: #ff3e00; font-weight: bold; border-bottom: 2px solid #ff3e00; }
</style>