Route parameters in Express - Mini Project: Build & Apply

Express Route Parameters

📖 Scenario: You are building a simple web server that responds to user requests for product details. Each product has a unique ID, and you want to capture this ID from the URL to show the right product information.

🎯 Goal: Create an Express server that uses route parameters to capture a product ID from the URL and respond with a message showing that ID.

📋 What You'll Learn

Create an Express app instance

Define a route with a route parameter named productId

Use the route parameter to send a response including the productId

Start the server listening on port 3000

💡 Why This Matters

🌍 Real World

Web servers often use route parameters to capture dynamic parts of URLs, like user IDs or product IDs, to serve personalized content.

💼 Career

Understanding route parameters is essential for backend developers working with Express or similar web frameworks to build RESTful APIs.

1

Set up Express app

Write code to import express and create an Express app instance called app.

Express

const express = require('express');
// Your code here

Hint

Use require('express') to import Express and then call it to create app.

2

Define route parameter

Add a GET route on app for path /product/:productId that takes req and res as parameters.

Express

const express = require('express');
const app = express();

// Your code here

Hint

Use app.get with the path /product/:productId and a callback with req and res.

3

Use route parameter in response

Inside the route handler, get the productId from req.params.productId and send a response with the text Product ID is: <productId> using res.send().

Express

const express = require('express');
const app = express();

app.get('/product/:productId', (req, res) => {
  // Your code here
});

Hint

Access the route parameter with req.params.productId and use template strings to send it back.

4

Start the server

Add code to make the app listen on port 3000 and log 'Server running on port 3000' when it starts.

Express

const express = require('express');
const app = express();

app.get('/product/:productId', (req, res) => {
  const productId = req.params.productId;
  res.send(`Product ID is: ${productId}`);
});

// Your code here

Hint

Use app.listen(3000, () => { ... }) and inside the callback log the message.

Practice

1. What does req.params represent in an Express route handler?

easy

A. An object containing route parameter values from the URL

B. A function to send responses to the client

C. A middleware to parse JSON bodies

D. A method to define static file paths

Solution

1. Step 1: Understand route parameters

   Route parameters are parts of the URL defined with a colon, like /user/:id.

2. Step 2: Accessing parameters in Express

   Express stores these dynamic values in req.params as an object with keys matching parameter names.

3. Final Answer:

   An object containing route parameter values from the URL -> Option A

4. Quick Check:

   req.params = route parameters object [OK]

Hint: Remember: req.params holds URL dynamic parts [OK]

Common Mistakes:

• Confusing req.params with req.body
• Thinking req.params is a function
• Using req.query instead of req.params

2. Which of the following is the correct way to define a route with a parameter named postId in Express?

easy

A. app.get('/post/:postId', (req, res) => { ... })

B. app.get('/post/postId', (req, res) => { ... })

C. app.get('/post/?postId', (req, res) => { ... })

D. app.get('/post/*postId', (req, res) => { ... })

Solution

1. Step 1: Syntax for route parameters

   Express uses a colon : before the parameter name to mark it as dynamic.

2. Step 2: Check each option

   app.get('/post/:postId', (req, res) => { ... }) uses /:postId correctly. Options A, B, and D use incorrect syntax for parameters.

3. Final Answer:

   app.get('/post/:postId', (req, res) => { ... }) -> Option A

4. Quick Check:

   Colon before param name = correct route param syntax [OK]

Hint: Use colon before param name in route path [OK]

Common Mistakes:

• Omitting the colon before parameter name
• Using query syntax instead of route params
• Using wildcard * incorrectly for parameters

3. What will be the output of the following Express route handler when a GET request is made to /user/42?

app.get('/user/:id', (req, res) => {
  res.send(`User ID is ${req.params.id}`);
});

medium

A. User ID is undefined

B. User ID is 42

C. User ID is :id

D. Error: Cannot read property 'id' of undefined

Solution

1. Step 1: Identify the route parameter

   The route defines a parameter :id, so req.params.id will hold the value from the URL.

2. Step 2: Check the request URL and response

   The URL /user/42 sets id to '42', so the response sends 'User ID is 42'.

3. Final Answer:

   User ID is 42 -> Option B

4. Quick Check:

   req.params.id = '42' from URL [OK]

Hint: Route param value replaces :id in req.params [OK]

Common Mistakes:

• Expecting req.params to be undefined
• Using req.query instead of req.params
• Forgetting to use backticks for template literals

4. Consider this Express route:

app.get('/product/:productId', (req, res) => {
  const id = req.params.product;
  res.send(`Product ID: ${id}`);
});

What is the problem with this code?

medium

A. req.params is not accessible in GET routes

B. The route path is missing a colon before productId

C. res.send cannot send strings

D. The route parameter name and req.params key do not match

Solution

1. Step 1: Check route parameter name

   The route defines parameter productId, so req.params will have a key named productId.

2. Step 2: Check usage of req.params

   The code uses req.params.product, which does not exist, so id will be undefined.

3. Final Answer:

   The route parameter name and req.params key do not match -> Option D

4. Quick Check:

   Param name mismatch causes undefined value [OK]

Hint: Match param name exactly in req.params key [OK]

Common Mistakes:

• Using wrong key name from req.params
• Forgetting colon in route path
• Assuming req.params is always empty

5. You want to create an Express route that handles URLs like /order/123/item/456 to get both orderId and itemId. Which route definition and parameter access is correct?

hard

A. app.get('/order/:order/item/:item', (req, res) => { res.send(`Order: ${req.params.orderId}, Item: ${req.params.itemId}`); })

B. app.get('/order/:orderId/item/:itemId', (req, res) => { res.send(`Order: ${req.params.item}, Item: ${req.params.order}`); })

C. app.get('/order/:orderId/item/:itemId', (req, res) => { res.send(`Order: ${req.params.orderId}, Item: ${req.params.itemId}`); })

D. app.get('/order/:orderId/item/:itemId', (req, res) => { res.send(`Order: ${req.query.orderId}, Item: ${req.query.itemId}`); })

Solution

1. Step 1: Define route with two parameters

   The route must have :orderId and :itemId to capture both values from the URL.

2. Step 2: Access parameters correctly

   Use req.params.orderId and req.params.itemId to get the values inside the handler.

3. Final Answer:

   app.get('/order/:orderId/item/:itemId', (req, res) => { res.send(`Order: ${req.params.orderId}, Item: ${req.params.itemId}`); }) -> Option C

4. Quick Check:

   Route params and req.params keys must match [OK]

Hint: Use matching param names in route and req.params [OK]

Common Mistakes:

• Mixing req.params with req.query
• Using wrong parameter names in handler
• Defining route without all needed parameters