DEV Community

Cover image for Day 4: Again Svelte Routing + Reading
Sourav Yadav
Sourav Yadav

Posted on

Day 4: Again Svelte Routing + Reading

#webdev #programming #javascript #webdevblog

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
Enter fullscreen mode Exit fullscreen mode

…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;
Enter fullscreen mode Exit fullscreen mode

✅ 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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
sawyerwolfe profile image
Sawyer Wolfe •

Did you know? Svelte's virtual DOM-free approach compiles your app to highly optimized JavaScript at build time, making it up to 40% faster at initial render than frameworks using a virtual DOM!