Hey devs! 👋

Big win today! I finally got svelte-spa-router working after struggling with it yesterday. Routing now works, and I'm feeling hyped 🔥

🧠 Goal for Today

• Fix the client-side routing issue with svelte-spa-router.
• Make modular pages render correctly like /home, /about, and /post/day04.
• Learn a bit more about how routing works in Svelte.

🧩 The Problem (and the Fix!)

So yesterday, I installed the router package using:

bun add svelte-spa-router

…but nothing was rendering. No error either — just a blank page. Turns out, I wasn't setting up the route map properly.

✅ Created a router.js file

import Home from './pages/Home.svelte';
import About from './pages/About.svelte';
import Day04 from './pages/Day04.svelte';

const routes = {
    '/home': Home,
    '/about': About,
    '/post/day04': Day04,
};

export default routes;

✅ Updated App.svelte to use the routes

<script>
  import Router from "svelte-spa-router";
  import NavBar from "./pages/NavBar.svelte";
  import routes from './router.js';

  console.log('Active route:', routes);
</script>

<NavBar />

<main class="main-body">
  <Router {routes} />
</main>

And boom — routing started working as expected! 🎉

💡 What I Learned

• svelte-spa-router needs a properly defined route object — that was the missing link.

• Having a separate router.js file makes managing routes way cleaner.

• Svelte's simplicity is starting to make a lot of sense now. Loving it!

Also read an awesome article: The Programmer’s Brain — if you struggle with reading other people’s code, this one is for you. Highly recommend.

Every time you fix a bug or break through a blocker — it builds dev confidence. Feels good. 🚀

live site: https://codingtheself.github.io/webdevblog/posts/day04.html

If you're also learning full-stack, exploring new tools like Svelte, or just building cool stuff — let's connect:

🐦 x.com/coding_theself

💼 linkedin.com/in/sourav-yadav-self

📚 dev.to/coding_self