Route matching order matters in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Which route handler responds to GET /users/123?

Given these Express routes, which handler will respond when a client requests GET /users/123?

Express

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

app.get('/users/profile', (req, res) => {
  res.send('User profile route');
});

app.get('/users/:id', (req, res) => {
  res.send('User ID route');
});

A Both handlers respond, sending both messages.

B No handler matches, so a 404 error is sent.

C The handler for '/users/:id' responds with 'User ID route'.

D The handler for '/users/profile' responds with 'User profile route'.

💡 Hint

Express matches routes in the order they are defined and picks the first matching route.

The route '/users/profile' matches the path '/users/profile' exactly.

Since it is defined before '/users/:id', it handles the request for '/users/profile' first.

For '/users/123', the '/users/:id' route matches.

📝 Syntax

intermediate

What error occurs with this route order?

Consider these Express routes. What error or behavior occurs when requesting GET /about?

Express

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

app.get('/about', (req, res) => {
  res.send('About page');
});

app.get('/:page', (req, res) => {
  res.send('Page: ' + req.params.page);
});

A The '/about' route responds with 'About page'.

B The '/:page' route responds with 'Page: about'.

C A syntax error occurs due to route conflict.

D Express throws a runtime error about ambiguous routes.

💡 Hint

Express matches routes in the order they are defined.

The '/about' route is defined before the dynamic '/:page' route, so it matches first and responds correctly.

No syntax or runtime errors occur.

❓ component_behavior

advanced

What is the output when route order is reversed?

If the routes below are reversed in order, what response will GET /contact return?

Express

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

app.get('/:page', (req, res) => {
  res.send('Page: ' + req.params.page);
});

app.get('/contact', (req, res) => {
  res.send('Contact page');
});

A Responds with 'Page: contact'.

B Responds with 'Contact page'.

C Responds with 404 Not Found.

D Throws a runtime error due to duplicate routes.

💡 Hint

Express picks the first matching route it finds.

The dynamic route '/:page' matches '/contact' first because it is defined before the specific '/contact' route.

Therefore, the response is 'Page: contact'.

🔧 Debug

advanced

Why does this Express app always respond with 'Catch-all'?

Examine the code. Why does every GET request respond with 'Catch-all', even for '/home' or '/about'?

Express

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

app.get('*', (req, res) => {
  res.send('Catch-all');
});

app.get('/home', (req, res) => {
  res.send('Home page');
});

app.get('/about', (req, res) => {
  res.send('About page');
});

A The '/home' and '/about' routes override the catch-all route.

B Express throws an error because '*' is an invalid route pattern.

C The catch-all route is defined first and matches all requests, blocking later routes.

D The app crashes due to duplicate route definitions.

💡 Hint

Route order affects which handler runs first.

The route with '*' matches every path and is defined first, so it handles all requests.

Routes defined after it are never reached.

🧠 Conceptual

expert

How to ensure specific routes take priority over dynamic routes?

You have these routes in Express: 1. app.get('/:category', ...) 2. app.get('/products', ...) How should you order them to ensure '/products' route is matched first when requested?

A Use app.use() instead of app.get() for '/products'.

B Define app.get('/products', ...) before app.get('/:category', ...).

C Define app.get('/:category', ...) before app.get('/products', ...).

D Use regular expressions in the route paths to differentiate.

💡 Hint

Express matches routes in the order they are defined.

Specific routes like '/products' should be defined before dynamic routes like '/:category' to ensure they match first.

Otherwise, the dynamic route will catch requests intended for the specific route.

Practice

1. In Express, why does the order of route definitions matter?
app.get('/user', ...) and app.get('/:id', ...) are defined. Which route will handle /user if /:id is defined first?

easy

A. The most specific route always handles the request regardless of order.

B. Express matches all routes and runs all handlers regardless of order.

C. The first matching route in order handles the request, so /:id will handle /user.

D. Express throws an error if routes overlap.

Solution

1. Step 1: Understand Express route matching order

   Express checks routes in the order they are defined and stops at the first match.

2. Step 2: Analyze the given routes

   If /:id is defined before /user, the path /user matches /:id first, so that handler runs.

3. Final Answer:

   The first matching route in order handles the request, so /:id will handle /user. -> Option C

4. Quick Check:

   Route order controls matching = C [OK]

Hint: Remember: Express uses first match wins rule [OK]

Common Mistakes:

• Thinking Express runs all matching routes
• Assuming specific routes override order automatically
• Believing Express throws errors on overlapping routes

2. Which of the following is the correct way to define routes so that /about is handled before any dynamic /:page route in Express?

easy

A. app.get('/:page', handler); app.get('/about', handler);

B. app.get('/about', handler); app.get('/:page', handler);

C. app.get('/about', handler); app.use('/:page', handler);

D. app.use('/:page', handler); app.get('/about', handler);

Solution

1. Step 1: Recall route order importance

   Specific routes like /about must be defined before dynamic routes like /:page to match first.

2. Step 2: Check options for correct order

   app.get('/about', handler); app.get('/:page', handler); defines /about first, then /:page, ensuring /about matches before dynamic routes.

3. Final Answer:

   app.get('/about', handler); app.get('/:page', handler); -> Option B

4. Quick Check:

   Specific before dynamic = A [OK]

Hint: Put specific routes before dynamic ones [OK]

Common Mistakes:

• Defining dynamic routes before specific ones
• Using app.use instead of app.get for specific routes
• Assuming order doesn't affect matching

3. Given the following Express routes:

app.get('/product/:id', (req, res) => res.send('Product ' + req.params.id));
app.get('/product/list', (req, res) => res.send('Product List'));

What will be the response when a client requests /product/list?

medium

A. 'Product List'

B. 'Product list'

C. 404 Not Found

D. Error: Route conflict

Solution

1. Step 1: Check route order

   The dynamic route /product/:id is defined before the specific /product/list route.

2. Step 2: Determine which route matches first

   Request /product/list matches /product/:id first, so it returns 'Product list'.

3. Step 3: Check case sensitivity

   The specific route sends 'Product List' with capital 'L', while the dynamic route sends 'Product ' + id, which would be 'Product list' if matched.

4. Final Answer:

   'Product List' -> Option A

5. Quick Check:

   Specific route matches only if defined before dynamic [OK]

Hint: First matching route runs, order matters for specific vs dynamic [OK]

Common Mistakes:

• Assuming specific route matches first regardless of order
• Expecting 404 when dynamic route matches
• Thinking Express throws route conflict errors

4. You have these Express routes:

app.get('/:category', handler1);
app.get('/books', handler2);

Requests to /books always go to handler1. How do you fix this?

medium

A. Move app.get('/books', handler2) before app.get('/:category', handler1).

B. Change /:category to /category/:name.

C. Use app.use instead of app.get for /books.

D. Rename /books to /books/all.

Solution

1. Step 1: Identify route order problem

   The dynamic route /:category matches /books first because it is defined before the specific route.

2. Step 2: Fix by reordering routes

   Moving the specific /books route before the dynamic one ensures /books matches handler2 first.

3. Final Answer:

   Move app.get('/books', handler2) before app.get('/:category', handler1). -> Option A

4. Quick Check:

   Specific routes before dynamic fix matching [OK]

Hint: Place specific routes above dynamic routes [OK]

Common Mistakes:

• Changing route paths unnecessarily
• Using app.use instead of app.get incorrectly
• Ignoring route order importance

5. You want to create an Express app where:
- /api/users returns a user list
- /api/:resource returns data for any resource

How should you order these routes to ensure /api/users returns the user list and /api/products returns product data?

hard

A. Define /api/:resource first, then /api/users.

B. Combine both routes into one with conditional logic inside.

C. Use app.use for /api/users and app.get for /api/:resource.

D. Define /api/users first, then /api/:resource.

Solution

1. Step 1: Understand route specificity and order

   Specific routes like /api/users must be defined before dynamic routes like /api/:resource to match correctly.

2. Step 2: Apply correct order

   Defining /api/users first ensures requests to /api/users hit that route, while other resources match the dynamic route.

3. Final Answer:

   Define /api/users first, then /api/:resource. -> Option D

4. Quick Check:

   Specific before dynamic for correct matching [OK]

Hint: Always put specific API routes before dynamic ones [OK]

Common Mistakes:

• Defining dynamic route before specific API routes
• Using app.use incorrectly for route handlers
• Trying to merge routes instead of ordering