Implementing Routing in Svelte
Learn how to implement an SPA routing in Svelte using the svelte-routing library.
We'll cover the following...
So far, we've only worked on one page, but most web applications have multiple pages. In this lesson, we're going to take a look at how to implement routing in Svelte to create more pages and navigate between them.
By default, Svelte doesn't have a built-in way to handle routing, so we're going to use a third-party community-developed package called svelte-routing. We're going to define all routes at the root of our application, App.svelte:
<script>
import { state } from '../state'
import Header from '../components/Header.svelte'
export let id;
const student = $state.students.find(student => [id, Number(id)].includes(student.id));
</script>
<Header />
details view for: {id}
We need to import the Router and Route components from svelte-routing. For each route, we want to use the Route component with a component prop, where we can pass the component that we want to render. Notice that Route components can only be used inside the Router component.
For the home page, we just need to pass the component and we're good. However, for the Details component, we ...