Render Dynamic Pages in SvelteKit with Parameter Based Routing
Dynamic routing is a critical part of most applications. For our blog, we want to have pages load dynamically given a post or article slug. Continuing with our dummy data, we will use the slug to navigate dynamically to a new page and only display information for that singular item from our data.
These dynamic pages include an accompanying +page.js file that we can load data from. In this file we will check that the current page slug equals the post from our data store and display that posts data on the page.
Instructor: [0:00] dynamic or parameter-based routing are two terms that are used interchangeably and SvelteKit makes them really simple. To start out, we just want to come in here and we're going to wrap our title in an anchor tag, with an href. Let's go ahead and close that off.
[0:18] We know that we want this href to lead us to the post page. This is all the posts, and we want to go to a specific post page. You would say posts/, and give it the curly brackets, and put post.slug. We know for this slug, for example, we know that A Study in Pink in our fake DB, the slug takes this form, a-study-in-pink.
[0:47] What that would look like if we come to the URL and go to the end? Let's open this up for a minute. It would look like /a-study-in-pink. If we go there now, it'll give us an error.
[1:02] The way that you handle perimeter-based routing in SvelteKit, is you come into the folder where you want the nested route and we will say, new file, and this will be slug. Then we'll give it its own page.svelte. We actually have this page now, it's not erroring.
[1:21] If we just put a simple P tag and say, hello from the individual post page, we'll see that pop up. How do we get the data that we actually want though? We need to come in here and add another page.js, and we can import the fake data from lib fake db.
[1:51] If we just come back to this page.js, let's grab this function, and let's paste it in this page.js. It's still a page load, but this time we can get the params off of the load function. These params correspond to this parameter because it's in this route.
[2:16] The way that we check that is we can say, const route slug equals params.slug, because that's the name of this dynamic or parameter-based route. We just want to get the slug that's being sent. The way that it checks that is over here in the URL, it's. going to check for posts, which is the post, and then this will be the slug, and it will return to us, whatever that value is.
[2:54] On this page, we should expect it to be a study in pink. Then what we want to do is get the single post. Single post equals fake date filter, and then we just want to return the post and that will be equal to get single post. We save that. Then we know that we also need to come back into the page.svelte and do our importing again with the script tag and explored lit data.
[3:37] We know that now that this will have, it should only be one post, so that we're going to have to index into this because it's still getting an array. It'll be an array of one post.
[3:51] We can actually handle that by coming back to our page.js, and just getting the single post and that should change that for us. Now it's just a single post. Now we just want, let's get rid of this and do an H1 with the data.post.title. Then, let's do a P tag with the data.post.content. Then we can save that and there we go.
[4:31] Again, in review, we added a dynamic route with this bracket slug syntax and in the page.js, we got the slug ID or param using the params function or params object de-structured off of this load function that comes from SvelteKit.
[4:51] Then we just filtered our fake data, where our post slug equals the route slug that we got off these params. Then in our page, we are just getting that data and we are adding it to the page.