Route matching order matters in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a route that responds to GET requests at the root URL.

Express

app.[1]('/', (req, res) => {
  res.send('Home page');
});

Drag options to blanks, or click blank then click option'

Aget

Bpost

Cput

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using post instead of get for a route that should respond to GET requests.

Confusing HTTP methods like put or delete for simple page retrieval.

The get method defines a route for HTTP GET requests, which is used to retrieve data like the home page.

2fill in blank

medium

Complete the code to define a route that matches any URL starting with '/user/'.

Express

app.get('/user/[1]', (req, res) => {
  res.send('User profile');
});

Drag options to blanks, or click blank then click option'

A*

B+

C?

D:id

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*' which matches everything but is less specific.

Using '?' or '+' which are regex quantifiers, not route parameters.

The :id syntax defines a route parameter that matches any value in that part of the URL.

3fill in blank

hard

Fix the error in the route order so that the specific route is matched before the general one.

Express

app.get('/[1]', (req, res) => {
  res.send('Specific route');
});

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

Drag options to blanks, or click blank then click option'

Auser/:profile

Buser/profile

C:user/profile

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Defining general parameter routes before specific routes causes the specific routes to never match.

Using parameter syntax in the specific route unnecessarily.

The specific route /user/profile must be defined before the general /:id route to match correctly.

4fill in blank

hard

Fill both blanks to create a middleware that logs requests only for routes starting with '/api'.

Express

app.[1]('/[2]', (req, res, next) => {
  console.log('API request:', req.method, req.url);
  next();
});

Drag options to blanks, or click blank then click option'

Ause

Bget

Capi

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'use' for middleware.

Using the wrong path prefix like '/user' instead of '/api'.

Middleware uses app.use and the path /api to apply to all routes starting with '/api'.

5fill in blank

hard

Fill all three blanks to define routes so that '/about' shows the about page, and all other paths show a 404 message.

Express

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

app.[2]((req, res) => {
  res.status(404).send('[3]');
});

Drag options to blanks, or click blank then click option'

Aabout

Buse

CPage not found

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Defining the 404 handler with 'get' instead of 'use'.

Placing the 404 handler before the specific routes.

Using the wrong message for 404.

The route '/about' is defined with get. The 404 handler uses app.use without a path to catch all unmatched routes and send a 'Page not found' message.

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