Why routing matters in Express

Introduction

Routing helps your web app decide what to do when someone visits different web addresses. It connects the address they type to the right response or page.

When you want to show different pages or data for different web addresses.

When you need to handle user actions like submitting a form or clicking a link.

When building APIs that respond differently based on the URL path.

When organizing your app so each part has its own address.

When you want to control what users see based on the URL they visit.

Syntax

Express

app.METHOD(PATH, HANDLER)

// METHOD: HTTP method like get, post, put, delete
// PATH: URL path string or pattern
// HANDLER: function to run when route matches

Use app.get() for handling GET requests (like loading a page).

The HANDLER function receives request and response objects to work with.

Examples

This route sends 'Home page' when someone visits the root URL.

Express

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

This route handles form submissions sent to '/submit' using POST method.

Express

app.post('/submit', (req, res) => {
  res.send('Form submitted')
})

This route captures a user ID from the URL and shows it.

Express

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

Sample Program

This simple Express app uses routing to send different messages for the homepage, about page, and a personalized hello page based on the URL.

Express

import express from 'express'

const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Welcome to the homepage!')
})

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

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

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`)
})

Important Notes

Routing keeps your app organized by separating what happens at each URL.

Order of routes matters: Express checks routes top to bottom and uses the first match.

Use parameters (like :name) to capture parts of the URL dynamically.

Summary

Routing connects URLs to code that sends responses.

It helps build websites and APIs that respond differently based on the address.

Express makes routing easy with simple methods like app.get() and app.post().

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