Overview
Routing in Express.js can be simple when dealing with static paths. However, in most real-world applications, you will need to handle dynamic routing — routes that change based on the input data. This typically involves using URL parameters, which allow you to capture dynamic values from the URL itself. For example, instead of a fixed URL like /user, you might have /user/:id where :id is a dynamic part of the URL. In this post, we will dive into dynamic routing and URL parameters in Express.js. You’ll learn how to define routes that accept dynamic values, how to extract those parameters, and how to use them to generate dynamic responses.
1. Introduction to Express.js Routing
Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features to build web and mobile applications. One of the key features of Express.js is its routing system, which allows you to define endpoints for your application. These endpoints can either be static (e.g., /about) or dynamic (e.g., /user/:id). The ability to define dynamic routes is what allows your application to serve customized content based on the request URL.
In Express.js, you define routes using methods such as app.get(), app.post(), app.put(), and app.delete() for different HTTP methods. A dynamic route includes a “parameter” (also called a “route variable”) in the URL, which you can use to make your route flexible.
2. Setting Up Express.js
Before we dive into dynamic routing, let’s quickly set up a basic Express.js server. If you don’t have Express installed, you can install it using npm:
npm install express
Then, create an index.js file with the following code to set up a basic Express.js server:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Welcome to the Home Page');
});
app.listen(port, () => {
console.log(Server running at http://localhost:${port}/);
});
This server listens on port 3000 and responds with “Welcome to the Home Page” when you visit http://localhost:3000/.
3. Basic Dynamic Routing in Express.js
In Express, dynamic routing is done by defining route parameters in the URL path using a colon (:). For instance, /user/:id would match any URL of the form /user/123, where 123 is a dynamic value that we can use within the route handler.
Here’s an example of defining a dynamic route that takes an id parameter:
app.get('/user/:id', (req, res) => {
const userId = req.params.id;
res.send(User ID: ${userId});
});
In this case, the :id in the route is a placeholder that will match any value. When a request is made to /user/123, the req.params.id will contain 123.
How It Works:
- The route
/user/:idwill match URLs like/user/1,/user/42,/user/john-doe, etc. req.paramscontains an object that holds the value of the dynamic parts of the route. In this case, it will contain theidparameter, which is accessible asreq.params.id.
Example request:
GET http://localhost:3000/user/123
Response:
User ID: 123
4. Extracting Multiple Parameters
You can define multiple dynamic parameters in a route, making your application more flexible. For instance, you could have a route like /product/:category/:id, which accepts both a category and an ID as dynamic parameters.
Here’s how to handle multiple parameters:
app.get('/product/:category/:id', (req, res) => {
const category = req.params.category;
const id = req.params.id;
res.send(Category: ${category}, Product ID: ${id});
});
This route will match URLs like /product/electronics/123 or /product/furniture/456, and extract both the category and id from the URL.
Example request:
GET http://localhost:3000/product/electronics/123
Response:
Category: electronics, Product ID: 123
5. Using Query Parameters in Conjunction with URL Parameters
In addition to URL parameters, Express also allows you to capture query parameters — parameters that appear in the URL after a question mark (?). Query parameters are often used for optional data such as filters, search terms, or pagination.
For example, consider a URL like /search?q=laptop&page=2. The q and page parameters are query parameters.
Here’s how to use both URL and query parameters together in Express:
app.get('/search/:query', (req, res) => {
const query = req.params.query;
const page = req.query.page || 1; // Default to page 1 if not specified
res.send(Searching for: ${query}, Page: ${page});
});
This route will capture the value of query from the URL and the value of page from the query string.
Example request:
GET http://localhost:3000/search/laptop?page=2
Response:
Searching for: laptop, Page: 2
How It Works:
req.paramswill contain the dynamicqueryparameter (e.g., “laptop”).req.querywill contain the query parameters as key-value pairs (e.g.,page=2).
6. Validating URL Parameters
In real-world applications, it’s important to validate URL parameters to ensure they meet expected formats. Express does not provide built-in validation for route parameters, but you can easily implement this yourself.
For example, you might want to ensure that the id parameter in the /user/:id route is a number. You can add a simple validation check before proceeding with your logic:
app.get('/user/:id', (req, res) => {
const userId = req.params.id;
// Check if the ID is a valid number
if (!/^\d+$/.test(userId)) {
return res.status(400).send('Invalid user ID');
}
res.send(User ID: ${userId});
});
This will return a 400 Bad Request error if the id is not a number.
Example request:
GET http://localhost:3000/user/abc
Response:
Invalid user ID
7. Handling Missing Parameters with Default Values
Another useful feature in dynamic routes is setting default values for parameters. You can specify default values when certain parameters are optional, helping to simplify your code and make your API more user-friendly.
Consider this example where the category parameter is optional:
app.get('/product/:category/:id', (req, res) => {
const category = req.params.category || 'general'; // Default to 'general'
const id = req.params.id;
res.send(Category: ${category}, Product ID: ${id});
});
In this case, if the category is not provided, it defaults to 'general'.
Example request:
GET http://localhost:3000/product//123
Response:
Category: general, Product ID: 123
8. Dynamically Rendering Responses Based on Parameters
One of the most powerful uses of dynamic routing is rendering dynamic content based on URL parameters. You can use the parameters to fetch data from a database or API and then render a custom response.
For example, consider an application where you fetch user data based on the id parameter:
const users = {
'1': { name: 'Alice', age: 30 },
'2': { name: 'Bob', age: 25 }
};
app.get('/user/:id', (req, res) => {
const userId = req.params.id;
const user = users[userId];
if (!user) {
return res.status(404).send('User not found');
}
res.send(Name: ${user.name}, Age: ${user.age});
});
In this example, the server looks up user data from the users object based on the dynamic id parameter. If the user exists, their name and age are displayed; otherwise, a 404 error is returned.
Example request:
GET http://localhost:3000/user/1
Response:
Name: Alice, Age: 30
Leave a Reply