navbar active link not working with real link - html

Question

I have been tried all day to make the link active when I click on it but it only works with a href that is "fake" but not with my href. In the example code, it works for Research but not for Upload.
<li class="nav-item">
<a class="nav-link" href="{{ url_for('uploader.upload') }}">Upload</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>

Answer 1

ended up working, turned out jquery and bootstrap were not in sync
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('main.index') }}">Hazen</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
{% if not current_user.is_anonymous %}
<a class="nav-item nav-link {% if display_page=='index' %} active{%
endif %}" class="nav-item nav-link" href="{{ url_for('main.user',
username=current_user.username) }}">Dashboard</a>
<a class="nav-item nav-link {% if display_page=='upload' %} active{%
endif %}" href="{{ url_for('uploader.upload') }}">Upload</a>
{% endif %}
{% if current_user.is_anonymous %}
<a class="nav-item nav-link" href="{{ url_for('auth.login')
}}">Login</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('auth.logout')
}}">Logout</a>
{% endif %}
</div>
</div>
</nav>