Trailing slash behavior in Flask - Mini Project: Build & Apply

Trailing Slash Behavior in Flask Routes

📖 Scenario: You are building a simple Flask web app that has two pages: a homepage and an about page. You want to understand how Flask handles URLs with and without trailing slashes.

🎯 Goal: Create two Flask routes: one for the homepage at / and one for the about page at /about/. Learn how Flask redirects URLs when the trailing slash is missing or present.

📋 What You'll Learn

Create a Flask app instance named app

Define a route for the homepage at / that returns the text 'Welcome to the homepage!'

Define a route for the about page at /about/ that returns the text 'About us page'

Observe how Flask handles requests to /about without the trailing slash

💡 Why This Matters

🌍 Real World

Web developers often need to control URL formats for SEO and user experience. Understanding trailing slash behavior helps avoid broken links and unexpected redirects.

💼 Career

Knowing how Flask handles trailing slashes is important for backend developers building web applications to ensure clean and consistent URLs.

1

Create the Flask app and homepage route

Import Flask from flask and create a Flask app instance called app. Then define a route for the homepage at / that returns the string 'Welcome to the homepage!'.

Flask

# Your code here

Hint

Start by importing Flask and creating the app instance. Then use @app.route('/') to define the homepage route.

2

Add a trailing slash route for the about page

Add a new route to app for the URL /about/ (with a trailing slash). Define a function called about that returns the string 'About us page'.

Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the homepage!'

# Add the about page route below
# Your code here

Hint

Use @app.route('/about/') to define the about page route with a trailing slash.

3

Test Flask's trailing slash redirect behavior

Explain what happens if a user visits /about (without the trailing slash) in their browser. Add a comment in the code describing Flask's automatic redirect behavior for routes defined with a trailing slash.

Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the homepage!'

@app.route('/about/')
def about():
    # Flask will redirect '/about' to '/about/' automatically
    return 'About us page'

Hint

Write a comment inside the about function explaining Flask's redirect from /about to /about/.

4

Add a route without trailing slash and observe behavior

Add a new route for /contact (without trailing slash) that returns 'Contact page'. Add a comment explaining that Flask will NOT redirect if the trailing slash is missing in the route definition.

Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to the homepage!'

@app.route('/about/')
def about():
    # Flask automatically redirects '/about' to '/about/' with a 308 redirect
    return 'About us page'

# Add a route for '/contact' without trailing slash
# Your code here

Hint

Define the /contact route without a trailing slash and add a comment about Flask's behavior.

Practice

1. In Flask, what happens if you define a route with a trailing slash like @app.route('/home/') and a user visits /home without the slash?

easy

A. Flask returns a 404 Not Found error.

B. Flask serves the /home route without redirecting.

C. Flask redirects the user to /home/ automatically.

D. Flask throws a server error.

Solution

1. Step 1: Understand trailing slash behavior in Flask routes

   Routes defined with a trailing slash expect URLs to end with a slash.

2. Step 2: Check Flask's automatic redirect behavior

   If a user visits the URL without the trailing slash, Flask automatically redirects to the URL with the slash.

3. Final Answer:

   Flask redirects the user to /home/ automatically. -> Option C

4. Quick Check:

   Trailing slash route redirects missing slash URL [OK]

Hint: Trailing slash routes redirect missing slash URLs [OK]

Common Mistakes:

• Thinking Flask serves both URLs without redirect
• Assuming 404 error occurs without slash
• Believing Flask throws server error

2. Which of the following is the correct syntax to define a Flask route that does NOT accept a trailing slash?

easy

A. @app.route('/about/')

B. @app.route('/about//')

C. @app.route('about/')

D. @app.route('/about')

Solution

1. Step 1: Identify correct route syntax without trailing slash

   To define a route that does not accept a trailing slash, the route string should not end with a slash.

2. Step 2: Check each option

   @app.route('/about') uses '/about' without a trailing slash, which is correct syntax.

3. Final Answer:

   @app.route('/about') -> Option D

4. Quick Check:

   Route without trailing slash = no slash in route string [OK]

Hint: No trailing slash means route string ends without slash [OK]

Common Mistakes:

• Adding extra slashes in route string
• Omitting leading slash in route
• Confusing trailing slash with double slashes

3. Given this Flask code:

@app.route('/page/')
def page():
    return 'Page with slash'

What will happen if a user visits /page in their browser?

medium

A. The user sees 'Page with slash' without URL change.

B. The user is redirected to /page/ and sees 'Page with slash'.

C. The user gets a 404 Not Found error.

D. The server crashes with an error.

Solution

1. Step 1: Analyze route definition with trailing slash

   The route '/page/' expects URLs ending with a slash.

2. Step 2: Understand Flask's redirect behavior

   If the user visits '/page' without the slash, Flask redirects to '/page/' automatically and serves the response.

3. Final Answer:

   The user is redirected to /page/ and sees 'Page with slash'. -> Option B

4. Quick Check:

   Trailing slash route redirects missing slash URL [OK]

Hint: Trailing slash route redirects missing slash URL [OK]

Common Mistakes:

• Assuming no redirect happens
• Expecting 404 error on missing slash
• Thinking server crashes on missing slash

4. Consider this Flask code:

@app.route('/contact')
def contact():
    return 'Contact page'

What happens if a user visits /contact/ with a trailing slash?

medium

A. Flask returns a 404 Not Found error.

B. Flask throws a server error.

C. Flask serves the page normally.

D. Flask redirects to /contact without slash.

Solution

1. Step 1: Identify route without trailing slash

   The route '/contact' is defined without a trailing slash.

2. Step 2: Check Flask behavior on extra trailing slash

   Flask does NOT redirect URLs with an extra trailing slash to the no-slash route; it returns a 404 error.

3. Final Answer:

   Flask returns a 404 Not Found error. -> Option A

4. Quick Check:

   No trailing slash route rejects extra slash URL [OK]

Hint: No trailing slash route rejects URLs with slash [OK]

Common Mistakes:

• Thinking Flask redirects to no-slash URL
• Assuming page loads normally with slash
• Believing server throws error instead of 404

5. You want a single Flask route to accept both /blog and /blog/ URLs without redirecting or 404 errors. Which approach achieves this?

hard

A. Use Flask's strict_slashes=False option on the route decorator.

B. Define one route with trailing slash: @app.route('/blog/') only.

C. Define one route without trailing slash: @app.route('/blog') only.

D. Define two routes: @app.route('/blog') and @app.route('/blog/') pointing to the same function.

Solution

1. Step 1: Understand default Flask behavior

   By default, Flask treats routes with and without trailing slash differently, redirecting or 404ing as needed.

2. Step 2: Use strict_slashes=False to accept both

   Setting strict_slashes=False on the route decorator disables strict trailing slash matching, allowing both URLs without redirect or error.

3. Final Answer:

   Use Flask's strict_slashes=False option on the route decorator. -> Option A

4. Quick Check:

   strict_slashes=False allows both URLs [OK]

Hint: Use strict_slashes=False to accept both slash and no-slash URLs [OK]

Common Mistakes:

• Defining two routes duplicates code
• Relying on default redirect behavior
• Ignoring strict_slashes option