Svelte Router

Github Documentation
Contact me

React Router Patterns

The React Router experience, reimagined for Svelte with declarative routing and data loading patterns.

Routing Patterns

Live Demo Declarative Mode
Declarative Routing

Router Type: Browser Router

Uses the HTML5 History API for clean URLs (/profile)

Key Features

  • Component-based route definitions
  • Nested routing support
  • Navigation hooks (useNavigate, useLocation)
  • Route transitions and animations
  • Catch-all routes for 404 handling
<script lang="ts">
  import { Routes, Route, BrowserRouter, HashRouter, MemoryRouter } from "$lib/index.js";
  import { browser } from "$app/environment";
  import type { RouterType } from "$components/showcase.svelte";

  import Home from "./home.svelte";
  import Profile from "./profile.svelte";
  import Settings from "./settings.svelte";

  interface DeclarativeRouterProps {
    routerType: RouterType;
  }

  let { routerType }: DeclarativeRouterProps = $props();
</script>

{#if routerType === "browser" && browser}
  <BrowserRouter children={routes} />
{:else if routerType === "hash" && browser}
  <HashRouter children={routes} />
{:else}
  <MemoryRouter children={routes} />
{/if}

{#snippet routes()}
  <Routes>
    <Route path="/" Component={Home} />
    <Route path="/profile" Component={Profile} />
    <Route path="/settings" Component={Settings} />
    <Route path="*">
      {#snippet element()}
        <div class="text-center py-8">
          <h2 class="text-xl font-bold mb-2">404 - Page Not Found</h2>
          <p class="text-muted-foreground">The page you're looking for doesn't exist.</p>
        </div>
      {/snippet}
    </Route>
  </Routes>
{/snippet}