Sveltekit Changes: Routes
Tags: javascript, webdev, svelte, sveltekit
Published: 2022-09-14 18:32:43

## Introduction 

As you know, In last article I explained [Load Function changes](https://dev.to/theether0/sveltekit-load-function-behavior-changes-3kb6) 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:

1. `+page.svelte` is for your client side code with all the `html`, `css` and `js` for client.

2. `+page.js` is for Load function which i have explained in detail.

3. `+page.server.js` is for all server side code earlier you may know it by the name `shadow endpoint`. Here you define all the `form actions` for 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`. 
```html
// +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`. 
```Javascript
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):
```html
<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.

```Javascript 
// `+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](https://dev.to/theether0/sveltekit-load-function-behavior-changes-3kb6).

A `page.server.js` file handles your server side code in which you handle your form actions.

```Javascript 
// 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 <form> 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.

```Javascript 
// `+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.