res.redirect for redirections in Express - Mini Project: Build & Apply

Using res.redirect for Redirections in Express

📖 Scenario: You are building a simple Express web server that needs to send users to different pages based on certain conditions.

🎯 Goal: Learn how to use res.redirect to send users to another URL in an Express route.

📋 What You'll Learn

Create an Express app with a route at /start

Create a variable to hold the URL to redirect to

Use res.redirect to send the user to the URL stored in the variable

Add a route at /welcome that sends a welcome message

💡 Why This Matters

🌍 Real World

Web servers often need to send users to different pages or sites. Using res.redirect helps guide users smoothly.

💼 Career

Understanding how to redirect users is essential for backend web developers working with Express or similar frameworks.

1

Set up Express app and create /start route

Write code to import Express, create an app, and add a route at /start that takes req and res as parameters.

Express

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

// Your code here

Hint

Use require('express') to import Express and express() to create the app. Then use app.get to create the route.

2

Create a variable redirectUrl with value '/welcome'

Inside the /start route, create a variable called redirectUrl and set it to the string '/welcome'.

Express

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

app.get('/start', (req, res) => {
    // Create redirectUrl variable here
});

Hint

Use const redirectUrl = '/welcome'; inside the route function.

3

Use res.redirect to send user to redirectUrl

In the /start route, after creating redirectUrl, use res.redirect(redirectUrl) to redirect the user.

Express

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

app.get('/start', (req, res) => {
    const redirectUrl = '/welcome';
    // Use res.redirect here
});

Hint

Call res.redirect with the variable redirectUrl as argument.

4

Add /welcome route that sends a welcome message

Add a new route at /welcome that sends the text 'Welcome to the site!' using res.send. Also add app.listen(3000) to start the server.

Express

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

app.get('/start', (req, res) => {
    const redirectUrl = '/welcome';
    res.redirect(redirectUrl);
});

// Add /welcome route and app.listen here

Hint

Use app.get to create the /welcome route and res.send to send the message. Then start the server with app.listen(3000).

Practice

1. What does res.redirect('/home') do in an Express app?

easy

A. Sends a JSON response with '/home' data

B. Stops the server from running

C. Sends the user to the '/home' URL automatically

D. Logs '/home' to the console

Solution

1. Step 1: Understand res.redirect purpose

   The res.redirect method sends an HTTP redirect response to the client, telling the browser to go to a new URL.

2. Step 2: Analyze the argument '/home'

   Passing '/home' means the user will be redirected to the '/home' path on the same server.

3. Final Answer:

   Sends the user to the '/home' URL automatically -> Option C

4. Quick Check:

   res.redirect('/home') = Redirect to '/home' [OK]

Hint: res.redirect sends user to given URL automatically [OK]

Common Mistakes:

• Thinking it sends JSON data
• Confusing redirect with stopping server
• Assuming it logs to console

2. Which is the correct syntax to redirect permanently to '/dashboard' in Express?

easy

A. res.redirect('/dashboard', 301);

B. res.redirect(301, '/dashboard');

C. res.redirectPermanent('/dashboard');

D. res.redirectPermanent(301, '/dashboard');

Solution

1. Step 1: Recall res.redirect syntax for status code

   Express uses res.redirect(statusCode, url) to specify redirect type.

2. Step 2: Identify correct order of arguments

   The status code (301) must come first, then the URL string.

3. Final Answer:

   res.redirect(301, '/dashboard'); -> Option B

4. Quick Check:

   Status code first, URL second = res.redirect(301, '/dashboard'); [OK]

Hint: Status code goes first in res.redirect(status, url) [OK]

Common Mistakes:

• Swapping arguments order
• Using non-existent res.redirectPermanent method
• Passing status code as second argument

3. What will the browser do after this Express code runs?

app.get('/old', (req, res) => {
  res.redirect('/new');
});

medium

A. Show the content of '/old' page

B. Send a JSON response with '/new' data

C. Return a 404 error

D. Redirect the browser to '/new' URL

Solution

1. Step 1: Understand route handler behavior

   The handler for '/old' calls res.redirect('/new'), which sends a redirect response.

2. Step 2: Browser reaction to redirect

   The browser receives the redirect and automatically requests the '/new' URL instead of '/old'.

3. Final Answer:

   Redirect the browser to '/new' URL -> Option D

4. Quick Check:

   res.redirect('/new') = Browser goes to '/new' [OK]

Hint: res.redirect sends browser to new URL automatically [OK]

Common Mistakes:

• Expecting original page content to show
• Thinking it returns 404 error
• Confusing redirect with JSON response

4. Find the error in this Express code snippet:

app.get('/start', (req, res) => {
  res.redirect('/end', 302);
});

medium

A. The status code should be first argument, not second

B. res.redirect cannot be used inside app.get

C. The URL must be absolute, not relative

D. 302 is not a valid redirect status code

Solution

1. Step 1: Check res.redirect argument order

   Express expects res.redirect(statusCode, url), status code first.

2. Step 2: Identify incorrect argument order

   The code uses res.redirect('/end', 302), which is reversed and causes unexpected behavior.

3. Final Answer:

   The status code should be first argument, not second -> Option A

4. Quick Check:

   Correct order: status, URL [OK]

Hint: Status code must come before URL in res.redirect [OK]

Common Mistakes:

• Swapping status and URL arguments
• Thinking res.redirect can't be used in routes
• Believing relative URLs are invalid
• Assuming 302 is invalid status

5. You want to redirect users from '/login' to '/dashboard' only if they are logged in. Which code correctly uses res.redirect to do this?

hard

A. if (req.user) { res.redirect('/dashboard'); } else { res.send('Please login'); }

B. res.redirect('/dashboard'); if (req.user) { res.send('Welcome'); }

C. res.redirect(302, '/dashboard'); res.send('Logged in');

D. if (!req.user) { res.redirect('/dashboard'); } else { res.send('Please login'); }

Solution

1. Step 1: Check login condition usage

   The code must check if req.user exists to confirm login.

2. Step 2: Redirect only if logged in

   If logged in, redirect to '/dashboard'; otherwise, send a message to login.

3. Step 3: Verify correct use of res.redirect and res.send

   if (req.user) { res.redirect('/dashboard'); } else { res.send('Please login'); } correctly calls res.redirect inside the if block and sends response otherwise, avoiding multiple responses.

4. Final Answer:

   if (req.user) { res.redirect('/dashboard'); } else { res.send('Please login'); } -> Option A

5. Quick Check:

   Redirect only when logged in = if (req.user) { res.redirect('/dashboard'); } else { res.send('Please login'); } [OK]

Hint: Redirect inside if block after login check [OK]

Common Mistakes:

• Calling res.redirect without condition
• Sending multiple responses in one request
• Redirecting when user is not logged in