Why routing matters in Express - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a route matches in Express?

Consider this Express code snippet:

app.get('/hello', (req, res) => { res.send('Hello World!'); });

What will the server send back when a client requests /hello?

Express

app.get('/hello', (req, res) => { res.send('Hello World!'); });

A The server sends back an empty response

B The server responds with a 404 Not Found error

C The server responds with the text 'Hello World!'

D The server crashes with an error

💡 Hint

Think about what the res.send method does in Express.

When the route matches '/hello', the callback runs and sends 'Hello World!' as the response body.

📝 Syntax

intermediate

Identify the syntax error in this route definition

Look at this Express route:

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

What is wrong with this code?

Express

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

A Missing comma between path and callback function

B Using arrow function instead of regular function

C Incorrect use of req.params.id

D Missing semicolon after res.send

💡 Hint

Check the parameters passed to app.get carefully.

The route path and the callback function must be separated by a comma.

❓ state_output

advanced

What is the output when multiple routes match?

Given this Express code:

app.get('/item/:id', (req, res) => { res.send('Item ' + req.params.id); });
app.get('/item/special', (req, res) => { res.send('Special Item'); });

What will the server respond to a request for /item/special?

Express

app.get('/item/:id', (req, res) => { res.send('Item ' + req.params.id); });
app.get('/item/special', (req, res) => { res.send('Special Item'); });

A 'Special Item'

B 'Item special'

C 404 Not Found

D Server error

💡 Hint

Express matches routes in the order they are defined.

The first route matches '/item/:id' and captures 'special' as id, so it responds with 'Item special'. The second route is never reached.

🔧 Debug

advanced

What happens when a route handler calls next()?

Look at this Express code:

app.get('/api/data', (req, res, next) => { next(); });
app.get('/api/data', (req, res) => { res.send('Data loaded'); });

When a client requests /api/data, what happens?

Express

app.get('/api/data', (req, res, next) => { next(); });
app.get('/api/data', (req, res) => { res.send('Data loaded'); });

A The server crashes with an error

B The server hangs and never responds

C The server responds with 404 Not Found

D The server responds with 'Data loaded'

💡 Hint

Think about what calling next() does in a route handler.

Calling next() in the first handler passes control to the next matching route handler (the second one), which sends 'Data loaded'. Express chains multiple handlers for the same path and method.

🧠 Conceptual

expert

Why is route order important in Express?

Imagine you have these routes:

app.get('/user/:id', handler1);
app.get('/user/profile', handler2);

What is the effect of defining /user/:id before /user/profile?

A Requests to '/user/profile' will be handled by handler1, not handler2

B Requests to '/user/profile' will be handled by handler2 as expected

C Requests to '/user/profile' will cause the server to crash

D Express will throw an error about duplicate routes

💡 Hint

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

Since '/user/:id' matches any path starting with '/user/', including '/user/profile', it will catch that request first if defined before '/user/profile'. So handler2 never runs.

Practice

1. Why is routing important in an Express application?

easy

A. It connects different URLs to specific code that sends responses.

B. It styles the webpage with CSS automatically.

C. It stores data permanently in a database.

D. It compiles JavaScript into machine code.

Solution

1. Step 1: Understand routing purpose

   Routing links URLs to the code that handles requests and sends responses.

2. Step 2: Eliminate unrelated options

   Styling, data storage, and compilation are not routing tasks.

3. Final Answer:

   It connects different URLs to specific code that sends responses. -> Option A

4. Quick Check:

   Routing = URL to response code [OK]

Hint: Routing matches URLs to code that sends responses [OK]

Common Mistakes:

• Confusing routing with styling or database tasks
• Thinking routing compiles code
• Believing routing stores data

2. Which of the following is the correct way to define a GET route for the path /home in Express?

easy

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

B. app.route('/home').get = (req, res) => { res.send('Welcome'); };

C. app.get('/home') { res.send('Welcome'); }

D. app.get('/home', res.send('Welcome'));

Solution

1. Step 1: Recall Express GET route syntax

   The correct syntax is app.get(path, callback) where callback has (req, res).

2. Step 2: Check each option

   app.get('/home', (req, res) => { res.send('Welcome'); }); matches correct syntax; others have syntax errors or misuse.

3. Final Answer:

   app.get('/home', (req, res) => { res.send('Welcome'); }); -> Option A

4. Quick Check:

   Correct GET route syntax = app.get('/home', (req, res) => { res.send('Welcome'); }); [OK]

Hint: Use app.get(path, (req, res) => {}) for GET routes [OK]

Common Mistakes:

• Missing arrow function or callback syntax
• Assigning instead of calling methods
• Passing response directly without function

3. What will be the output when a user visits /about given this Express code?

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

medium

A. 404 Not Found error

B. Contact page

C. Server crash due to missing route

D. About us page

Solution

1. Step 1: Identify the route for '/about'

   The code defines app.get('/about') to send 'About us page'.

2. Step 2: Match URL to route

   Visiting '/about' triggers the first route, sending 'About us page'.

3. Final Answer:

   About us page -> Option D

4. Quick Check:

   URL '/about' matches route sending 'About us page' [OK]

Hint: Match URL to route path to find output [OK]

Common Mistakes:

• Confusing '/about' with '/contact' route
• Expecting 404 when route exists
• Assuming server crashes without reason

4. Identify the error in this Express routing code:

app.get('/hello', (req, res) => {
  res.send('Hello World');
});
app.get('/hello') {
  res.send('Hi again');
}

medium

A. First route is missing a response.

B. Routes cannot have the same path '/hello'.

C. Second route has incorrect syntax; missing callback function.

D. res.send() cannot be used inside app.get().

Solution

1. Step 1: Check syntax of second route

   The second app.get('/hello') lacks a callback function and uses braces incorrectly.

2. Step 2: Verify other options

   First route is correct; duplicate routes are allowed; res.send() is valid inside app.get().

3. Final Answer:

   Second route has incorrect syntax; missing callback function. -> Option C

4. Quick Check:

   Syntax error in second route = Second route has incorrect syntax; missing callback function. [OK]

Hint: Check for callback function syntax in routes [OK]

Common Mistakes:

• Thinking duplicate routes are invalid
• Believing res.send() is disallowed
• Ignoring missing arrow function or callback

5. You want to create an Express app that responds with 'Hello, user!' when visiting /user/:name, where :name is any username. Which code correctly implements this dynamic routing?

hard

A. app.get('/user/name', (req, res) => { res.send('Hello, name!'); });

B. app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); });

C. app.get('/user/:name', (req, res) => { res.send('Hello, user!'); });

D. app.get('/user/:name', (req, res) => { res.send(req.query.name); });

Solution

1. Step 1: Understand dynamic route parameter usage

   Express uses :name to capture dynamic parts in req.params.name.

2. Step 2: Check each option

   app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); }); uses req.params.name correctly to personalize the message. The static '/user/name' option sends fixed text, the dynamic path with fixed 'Hello, user!' ignores the parameter, and req.query.name is for query strings (?name=foo), not path parameters (/user/foo).

3. Final Answer:

   app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); }); -> Option B

4. Quick Check:

   Dynamic param in path = req.params.name [OK]

Hint: Use req.params for dynamic URL parts [OK]

Common Mistakes:

• Using static path instead of dynamic parameter
• Accessing req.query instead of req.params
• Ignoring dynamic parameter in response