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
Top comments (1)
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!