This content originally appeared on DEV Community 👩💻👨💻 and was authored by Shivam Meena
Introduction
As you know, In last article I explained Load Function changes where I also mentioned about new routes changes and now we gonna look how they works and what they are now.
If you see a tree I'll will be showing it from src/routes directory.
New Directory Based Routing
Now, In sveltekit everything looks new it's also goes for routing. We all have been fan of file-based routing but sveltekit comes with new routing which is directory based.
So now you define a folder than add your +page.svelte, +page.js, +page.server.js files as per need where:
+page.svelteis for your client side code with all thehtml,cssandjsfor client.+page.jsis for Load function which i have explained in detail.+page.server.jsis for all server side code earlier you may know it by the nameshadow endpoint. Here you define all theform actionsfor the route.
That's the overview we need to get some more details. So we start from layout and gonna end at server routes.
- Layouts
Now theres is nothing like __layout.svelte and it's replaced with +layout.svelte and now you have to more things to look on those are +layout.js and layout.server.js.
// +layout.svelte
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/settings">Settings</a>
</nav>
<slot></slot>
+layout.svelte going to work same as __layout.svelte but you need to define Load Function inside +layout.js. And if you need Load Function to run on server you going to use layout.server.js.
export function load() {
return {
sections: [
{ slug: 'profile', title: 'Profile' },
{ slug: 'notifications', title: 'Notifications' }
]
};
}
But here comes the twist you can only do Load Functions in layout.server.js no http request handling here which comes in +page.server.js, so never get confused in this.
+layout.js, +layout.server.js can export page options — prerender, ssr and csr.
- Error Page
If an error occurs during load, SvelteKit will render a default error page. You can customise this error page on a per-route basis by adding an +error.svelte file (So there is no __error.svelte now):
<script>
import { page } from '$app/stores';
</script>
<h1>{$page.status}: {$page.error.message}</h
- +page
A +page.svelte component defines a page of your app. So your / route will be +page.svelte inside src/routes/. Which will be your client side code.
// `+page.svelte`
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
<h1>{data.title}</h1>
<div>{@html data.content}</div>
A +page.js files handles load function of that route. For more detailed explanation read Sveltekit Changes: Load Function.
A page.server.js file handles your server side code in which you handle your form actions.
// page.server.js or `+page.js`
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
const post = await getPostFromDatabase(params.slug);
if (post) {
return post;
}
throw error(404, 'Not found');
}
If load lets you read data from the server, actions let you write data to the server using the
element
So if you want a route named about you have create a directory inside src/routes directory with the name about. Inside that you will add +page.svelte and if you need load function add +page.js and also wanna use form actions and server side rendering ad +page.server.js.
I know it's alot to degist first but after one project you are sold for the idea.
- +sever Routes
Sometimes we need API or endpoints for our http requests then you can simply use +server.js. So if you wanna create a API or Endpoint by the name login, You will create a directory inside src/routes by the name login and add +server.js file inside it.
These endpoints are capable of HTTP request methods eg. GET, POST, PATCH, PUT AND DELETE and it works on request and response method of http requests.
// `+server.js`
import { error } from '@sveltejs/kit';
/** @type {import('./$types').RequestHandler} */
export function GET({ url }) {
const min = Number(url.searchParams.get('min') ?? '0');
const max = Number(url.searchParams.get('max') ?? '1');
const d = max - min;
if (isNaN(d) || d < 0) {
throw error(400, 'min and max must be numbers, and min must be less than max');
}
const random = min + Math.random() * d;
return new Response(String(random));
}
new Response is a reponse object that will return a response to client.
- Finally the Routes Tress
.
├── (authed)
│ ├── +layout.server.ts
│ ├── +layout.svelte
│ └── dashboard
│ ├── +page.svelte
│ └── +page.ts
├── (unauthed)
│ ├── +layout.server.ts
│ ├── +layout.svelte
│ ├── +page.svelte
│ ├── +page.ts
│ ├── createAdmin
│ │ ├── +page.server.ts
│ │ └── +page.svelte
│ └── login
│ ├── +page.server.ts
│ └── +page.svelte
└── api
Here you can see a file structure of my project and you might have seen some weird folder with name inside parentheses. Those are grouped layouts. We will discuss them later.
I'll suggest you to migrate your old projects to newer one to understand it more better.
This is me writing for you. If you wanna ask or suggest anything please put it in comment.
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Shivam Meena
Shivam Meena | Sciencx (2022-09-14T18:32:43+00:00) Sveltekit Changes: Routes. Retrieved from https://www.scien.cx/2022/09/14/sveltekit-changes-routes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.