Day 4: Again Svelte Routing + Reading

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