Route Parameters and Query Parameters

About the Request Object

In Express, every route handler receives a req (request) object. This object contains all the information about the incoming HTTP request, such as:

• The URL and HTTP method
• Query parameters (req.query)
• Route parameters (req.params)
• Request headers (req.headers)
• Request body (req.body, for POST/PUT/PATCH)

When you type req: Request in TypeScript, you get:

• Autocomplete and type checking for properties like query, params, and body
• Clear documentation for anyone reading your code

You’ve already worked with APIs from the frontend using fetch(). When you make a request from the browser, you send information like the URL, query parameters, headers, and sometimes a request body. You can see all of this in the browser’s DevTools, under the “Network” tab.

The Express Request object on the backend represents all of this information for each incoming request. For example:

• The route parameters (like /products/2) are available as req.params.
• The URL and query parameters you see in the network tab are available as req.url and req.query.
• The headers sent by the browser (like Authorization or Content-Type) are available as req.headers.
• The body of a POST/PUT request (the data you send from a form or with fetch) is available as req.body.

So, when you see a request in the network tab on the frontend, all of that information is accessible in your Express route handler through the Request object.

Route Parameters

Route parameters are part of the URL path itself. They are used to identify a specific resource.

To create a route parameter in Express, add a colon (:) before the parameter name in your route path. For example:

// GET /products/:id
app.get("/products/:id", (req, res) => {
  const { id } = req.params; // This will be a string
  // Use id to find a product...
  res.json({ message: `Id is: ${id}` });
});

What does :id mean?

• The :id in /products/:id is a placeholder for any value. For example, /products/2 or /products/123 will both match this route, and the value after /products/ will be available as req.params.id.
• You can use any name after the colon, and you can have more than one route parameter in a path.
• req.params is an object where each property corresponds to a route parameter, and the property names match the names you use in the route path (e.g., req.params.productId, req.params.reviewId).

To add multiple route parameters, add a colon and a name for each parameter in your route path. For example, /products/:productId/reviews/:reviewId has two parameters: productId and reviewId. Each value in the URL will be available as a property on req.params with the same name you used in the path.

Example with multiple route parameters:

// GET /products/:productId/reviews/:reviewId
app.get("/products/:productId/reviews/:reviewId", (req, res) => {
  const { productId, reviewId } = req.params;
  // Use productId and reviewId to find a specific review for a product...
  res.json({
    message: `Found review ${reviewId} for product ${productId}`,
  });
});

• Route parameters are always strings, so convert to a number if needed: const id = Number(req.params.id);

Repo link

Query Parameters

Query parameters are added to the end of a URL, after a ?. They are often used for filtering, searching, or specifying options.

To add multiple query parameters, add each key-value pair after the ?, separated by an ampersand (&). For example: /products?maxPrice=100&category=books has two query parameters: maxPrice and category. All query parameters are available in req.query as properties with the same names you used in the URL.

// GET /products?maxPrice=100&category=books
app.get("/products", (req, res) => {
  const { maxPrice, category } = req.query;
  // Use maxPrice and category to filter products...
  res.json({
    message: `Filtering products with maxPrice: ${maxPrice}, category: ${category}`,
  });
});

• req.query is an object containing all query parameters.
• Query parameters are always strings or undefined, so you may need to convert them (e.g., Number(req.query.maxPrice)).

Repo link

Summary Table: