All language subtitles for 032 Express Routing Parameters_en

All right.

So this is the current state of our website.

We're able to add new posts through the compose page and once we hit publish then our posts all appear

right up here on our home page.

As you might imagine a blog post is usually a bit longer than this right?

It might be five or six paragraphs long. And having all of that cluttering the home page is not a great

thing and you probably usually wouldn't read it from the home page.

If you think about the blogs that you read, you probably could click on the blog title and it would take

you to a full page version of where the entire page is dedicated to that one blog post

right?

So if we wanted to implement that then we kind of have to have a way of accessing that page so it would

be something like /posts/day-0 right? And then when we hit enter it would take

us straight to a single page which is dedicated to a single blog post.

Now you see the style of URLs all over the Web

right?

Say if we go to BBC News and you have a look at all the different topics that they have, say technology

right? You access that through /news/technology and then politics is /news/politics

business, world etc..

right? Now on one hand you could create this by creating separate paths

right?

So where your route is simply this /news/business and you render a custom page for each and

every one of these topics.

But if you click down more you can see there's like loads of different topics and that seems a little

bit repetitive and quite painful.

So I want to introduce you to something that Express allows us to do which is to use route parameters.

Have a look at this page. I'll link to it in the course resources for this lesson.

And I want you to read the section on route parameters.

It goes into detail about how it works.

But let me summarize it for you.

Essentially what Express allows you to do is you can use a colon and then a parameter name.

And when the user heads over to that page say /user/123, then you will be able to tap into

that parameter stored inside this user id that is 123.

Now in order for this to make more sense I want to show you how it works rather than just tell you.

So I've set up a Node.js playground on KataCoda which is a really nice tool for demonstrating some of

these things because we can utilize this standalone playground just to demonstrate one very simple thing.

You don't have to follow along.

I just wanted to show you how it works.

So over here we've got our app.js and I've installed some Node modules on this playground. So I've

got Express and I can use it inside my app.js. I've created my new app using Express and I've set

my app to listen on port 3000.

Now if I head over to the linked page on KataCoda then I can view that page and this is the home route

or the root route.

Currently there's nothing there because I haven't told it to do anything because I haven't actually

run my app in the terminal. So I'm going to use nodemon to start up my server and now my server is running

on port 3000.

So now if I hit display port then tells me 'cannot get /' which means I have no get route

for my root route which is fine.

That's completely fine.

But just so you realize, this stand alone playground doesn't have body-parser, it doesn't have EJS.

We're just looking at pure Node.js with Express tagged on.

So this is a feature of Express is basically what I'm trying to say.

Now let's say that we create a route with app.get and we use something like /news/

: and then we get to give that parameter name let's say topic as the name.

And now we're going to add our callback

so our req and res.

And then we're going to open up a set of curly braces and inside here all I'm going to do is I'm going

to say console.log this parameter topic

right?

And in order to access it using Express the syntax is req,

so we're tapping into the request object when this route gets triggered and then we say req.params

dot the name of our param which is just topic without the colon.

This is the syntax that you will see in the documentation here

right?

We're tapping into req.params and that gives us access to all of the parameters that have

a colon in front of it and it gives us their values.

So what this means is that if I head over to localhost:3000/news/science then it should

log science over here.

Let's head over here and let's go to the /new/politics right?

Hit enter.

So now if we head back over here and we check out our console then you can see politics is logged down

here.

So let's go ahead and change that URL again.

Let's just say, uhm I don't know, movies.

Hit enter. Now

movies gets logged here.

So this is a way for us to be able to tap into that part of the URL which we've pre-specified as a

parameter.

So instead of creating a route for every single one of these say you know news/science news/

politics,

we can actually use the express routing parameters to do it dynamically and we can tap into that part

and then decide what to do instead of having to pre specify every single topic which is quite painful,

right?

So Express routing parameters are really simple and once you wrap your head around it, it's really really

powerful as well.

Before you tackle this challenge I recommend that you head over here and read about route parameters.

And once you're ready then you can go ahead and test it out in our upcoming challenge.