Lesson 4
Adding Route Parameters and Query Parameters in Express.js
Introduction to Route and Query Parameters

Welcome to today's Express.js lesson about Route and Query Parameters. Both play pivotal roles in handling HTTP requests in web applications. Imagine sending a letter; the street address (Route Parameter) is essential, while "Attn: Tim" (Query Parameter) is optional. Now, let's dive into these exciting terms.

What are Route and Query Parameters?

In web requests, route parameters come directly in the URL, serving as "placeholders" for actual values — they guide the requests, much like a GPS guiding a vehicle. On the flip side, query parameters send extra, optional information. They come after a ? in a key=value format.

Python
1'http://website.com/users/123/photos?year=2021'

In the above URL, 123 and photos denote route parameters, while year=2021 implies a query parameter.

Adding and Using Route Parameters

In Express.js, we create Route Parameters in the path of the route using a colon :. Use req.params to fetch them in the route handler function:

JavaScript
1const express = require('express'); 2const app = express(); 3 4// Using 'userid' as the route parameter 5app.get('/users/:userid', function(req, res) { 6 // Fetch the 'userid' parameter from req.params object 7 // and send it in the response 8 res.send("The user id is: " + req.params.userid); 9});

In this example, /users/123 would output The user id is: 123.

Adding and Using Query Parameters

Query parameters are added after a ?. To access them, use req.query.

JavaScript
1const express = require('express'); 2const app = express(); 3 4// Respond with the query parameter 'q' 5app.get('/search', function(req, res) { 6 // Fetch the 'q' parameter from req.query object 7 // and send it in the response 8 res.send("Search results for: " + req.query.q); 9});

A request to /search?q=coding will give Search results for: coding.

Route Parameters vs Query Parameters

Route parameters are the must-have data; query parameters are the good-to-have bits. Route parameters are excellent for identifying data like IDs, and query parameters work well for optional user queries or preferences.

Putting It All Together

Let's merge these parameters in a mini application.

JavaScript
1const express = require('express'); 2const app = express(); 3const PORT = 3000; 4 5// Route with URL parameter 6app.get('/user/:name', (req, res) => { 7 const userName = req.params.name; 8 res.send(`Hello, ${userName}!`); 9}); 10 11// Route with query parameter 12app.get('/search', (req, res) => { 13 const query = req.query.q; 14 res.send(`You searched for: ${query}`); 15}); 16 17app.listen(PORT, () => { 18 console.log(`Server running on http://localhost:${PORT}`); 19});

Here, /user/John will greet the user John with Hello, John!, while /search?q=nodejs will show You searched for: nodejs.

Lesson Summary and Practice

We've explored Route and Query Parameters in Express.js, essential for web development. Are you ready for practice exercises? The practice will strengthen your understanding, further cementing your skills in Route and Query Parameters. All the best!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.