Svelte Kit routing file change

I am surprised to see new routing file system in Svelte Kit, it replaces the routing files such as index.svelte . When you create a Svelte-Kit project, may notice the +page.svelte file, which is the new version of index.svelte.

 

Routes in Svelte-Kit 

So fart we have learned the default route , how about new route, such as about page.  

• In the src/route folder create about folder
• Let's create about route component.
• Every route component should have +page.svelte

In case of fetching data, a  +page.js /+page.ts  will carry the load function. 

src/routes/blog/[slug]/+page.js

import { error } from '@sveltejs/kit';
 
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  if (params.slug === 'hello-world') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
    };
  }
 
  throw error(404, 'Not found');
}

The above is dynamic route file. See the official documentation

More Svelte guides and samples are available at My WordPress blog