Dynamic Routing in Svelte
Set up a catch-all route strategy in your Svelte project to render new stories dynamically.
Fetch and render a story dynamically
Update the +page.js file to fetch all stories in the space.
src/routes/[...slug]/+page.js
/** @type {import('./$types').PageLoad} */
export async function load({ params, parent }) {
const { storyblokAPI } = await parent();
const response = await storyblokAPI.get('cdn/stories/home', {
const response = await storyblokAPI.get(`cdn/stories/${params.slug || 'home'}`, {
version: 'draft',
});
return {
story: response.data.story,
};
}Get the slug from the current route params, defaulting to the home story.
Previous Part
Visual Preview in Svelte