flask url_for in href is not redirecting to the correct flask method and rendering wrong page

Question

I have a flask application I am building. I have two methods/routes that do two different things. one route redirects to profile.html and the second route is supposed to redirect to update_profile.html

my issues is that in my profile html file, there is an edit profile link that uses url_for('views.profile_update') to redirect to the profile_update route/method. when I click the link, it just renders the same profile page that is part of the profile method rather than profile_update method. Not sure why this is happening...

views.py

from flask import Blueprint, render_template, session, redirect, url_for, request
from . import db

views = Blueprint('views', __name__)

@views.route('/profile', methods=(['GET']))
def profile():
  if 'username' in session:
    print('profile page')
    print(session['username'])
    loggedInUser = db.users.find_one({'username': session['username']})
    return render_template('profile.html', loggedInUser=loggedInUser)
  else:
    return redirect(url_for('auth.login'))

@views.route('/profile', methods=['GET', 'POST'])
def profile_update():
  if 'username' in session:
    print('profile update')
    return render_template('update_profile.html')
  else:
    return redirect(url_for('auth.login'))

profile.html

{% extends 'base.html' %}

{% block title %} PROFILE {% endblock %}

{% block navbar %}
  <a class="nav-item nav-link" id="feed" href="/">Feed</a>
  <a class="nav-item nav-link" id="activity" href="/">Activity</a>
  <a class="nav-item nav-link" id="photos" href="/">Photos</a>
  <a class="nav-item nav-link" id="edits" href="/">Edits</a>
  <a class="nav-item nav-link" id="profile" href="/profile">Profile</a>
  <a class="nav-item nav-link" id="logout" href="/auth/logout">Logout</a>
{% endblock %}

{% block content %}

<p>{{ loggedInUser.profile_pic }}</p>
<h1>{{ loggedInUser.username }}</h1>
<p>{{ loggedInUser.following }}</p>
<p>{{ loggedInUser.followers }}</p>
<p>{{ loggedInUser.email }}</p>
<p>{{ loggedInUser.name }}</p>
<p>{{ loggedInUser.location }}</p>
<p>{{ loggedInUser.bio }}</p>
<p>{{ loggedInUser.photo_list }}</p>
<p>{{ loggedInUser.edit_list }}</p>

<a class="nav-item nav-link" id="update_profile" href={{ url_for('views.profile_update') }}>Edit Profile</a>

{% endblock %}

update_profile.html

{% extends 'base.html' %}

{% block title %} UPDATE PROFILE {% endblock %}

{% block navbar %}
  <a class="nav-item nav-link" id="feed" href="/">Feed</a>
  <a class="nav-item nav-link" id="activity" href="/">Activity</a>
  <a class="nav-item nav-link" id="photos" href="/">Photos</a>
  <a class="nav-item nav-link" id="edits" href="/">Edits</a>
  <a class="nav-item nav-link" id="profile" href="/profile">Profile</a>
  <a class="nav-item nav-link" id="logout" href="/auth/logout">Logout</a>
{% endblock %}

{% block content %}

<form actions="/auth/signup" method="POST">
  <header>Sign Up</header>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" defaultValue="Enter Username"/>
    <label for="password">Password</label>
    <input type="password" for="password" name="password" defaultValue="Enter Password"/>
    <label for="password-confirm">Confirm Password</label>
    <input type="password" for="password-confirm" name="password-confirm" defaultValue="Confirm Password"/>
    <label for="email">Email</label>
    <input type="email" for="email" name="email" defaultValue="Enter Email"/>
    <label for="name">Name</label>
    <input type="text" for="name" name="name" defaultValue="Enter Name"/>
    <label for="account">Account</label>
    <select name="account">
      <option value="photographer">Photographer</option>
      <option value="videographer">Videographer</option>
      <option value="editor">Editr</option>
      <option value="designer">Designer</option>
    </select>
    <label for="bio">Bio</label>
    <input type="text" for="bio" name="bio" defaultValue="Enter Bio"/>
    <label for="location">Location</label>
    <input type="text" for="location" name="location" defaultValue="Enter City, State"/>
    <input type="submit" name="submit" value="Sign Up"/>
  </div>
</form>

{% endblock %}

What is supposed to happen is that when you get the profile.html file and click on the edit profile link, it is supposed to redirect to the profile_update and then render the update_profile.html file. Right now, it just keeps rendering the profile.html file. When i redirect it to something like home page, it works correctly. The profile_update is the only method/route that is not working.

Answer 1

The issue is that you are using the same url for both routes:

@views.route('/profile', methods=(['GET']))
def profile():
    ...

@views.route('/profile', methods=['GET', 'POST'])
def profile_update():
    ...

You could fix this by changing the profile_update url to something like this:

@views.route('/profile/update', methods=['GET', 'POST'])
def profile_update():
    ...