Add a Route to a SvelteKit Application
A route is very simple to create in SvelteKit. Using 'file-based routing' you simply add a .svelte file (posts.svelte) in the routes folder. Then we can navigate to where our app is running. In this case, we go to localhost:4000/posts.
The index.svelte file can be thought of as the home route which evaluates to localhost:4000.
We will see more types of routes as we go along.
Instructor: [0:00] We have our index route. Under routes, we have this +page.svelte, which equates to...If we open up the browser a little bit more, it equates to this home route, which would effectively be with the forward slash, which you see it go away. How do we get or how do we add another route? [0:22] We want to be able to navigate to things. Like on our blog, we want to be able to navigate to either blog. Let's say we use it more as a portfolio, we want to navigate to, "About." Right now, either of those will return a 404 or a blog. How do we add that?
[0:45] Let's go back home. Previously in SvelteKit, you would be able to add a file that would say about.svelte.
[0:59] With this new file layout, the way that we do this is we come back to our routes. We add a new folder -- this will be, "About" -- and then you add a new file to this, which is the page.svelte. Then here, let's give it a p tag and say, "Hello from the about page."
[1:26] If we save this and navigate to the about page, we'll see, "Hello from the about page." This is a blog, and we know that we want to have posts. A good next step would be to add a post route. You can take a moment, and do that yourself.
[1:48] All right. Now, we come to routes. We add a new folder and call it, "Posts." Then, we add a new file to the post, which is page.svelte. We can say, "This is where the posts will live." Then, we can come over here and scroll over. There you have it.
[2:26] In review, we learned how to add routes to our blog by coming into routes, adding another folder with the URL name. Then, in that folder, adding a +page.svelte.