Flask URL Helper Function - Flask url_for()

Flask Tutorial

About Lesson

In this Flask lesson we are going to learn about Flask URL Helper Function – Flask url_for(), so in any application when you have more than one routes, you need to include the route links for connecting of different pages, so the user can easily navigate to different pages of your application, for example if you have a navigation bar in your web application you can simply add your Dynamic URL’s in their. there are two ways that you can add this kind of functionality in your Flask Application, the first way is that you can add directly your URL link’s in your templates. but it is not the recommended way, if you have simple routes than you can add directly your URL link’s. but for dynamic and complex routes it is not good idea. the second way is using the helper function, Flask provides the url_for() helper function, which generates URLs from the information stored in the application’s URL map.

If you remember we have a navbar in our base.html file and we have added our simple routing, now we want to change that with url_for(). it is one of the recommended way of adding URL Link’s. this function takes the view function name (or endpoint name for routes defined with app.add_url_route()) as its single argument and returns its URL.

href = {{url_for('index')}}
href = {{url_for('Contact')}}

1 2	href = {{url_for('index')}} href = {{url_for('Contact')}}

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet" >
</head>
<body>

 <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{url_for('Index')}}">GeeksCoders</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="{{url_for('Index')}}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{url_for('Contact')}}">Contact</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="{{url_for('About')}}">About</a>
        </li>

      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search"
               placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


{% block body %}

{% endblock %}

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" >

</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{% block title %}{% endblock %}</title>

rel="stylesheet" >

</head>

<body>

<a class="navbar-brand" href="{{url_for('Index')}}">GeeksCoders</a>

</li>

<a class="nav-link" href="{{url_for('Contact')}}">Contact</a>

</li>

<a class="nav-link" href="{{url_for('About')}}">About</a>

</li>

</ul>

<input class="form-control me-2" type="search"

placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

{% block body %}

{% endblock %}

</script>

</body>

</html>

templates/index.html

{% extends 'base.html' %}

{% block title %}Home{% endblock %}



{% block body %}

<div class="container">
 <h1>Home Page - Template Inheritance</h1>

<h3>Welcome to . {{data}}</h3>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block body %}

<h1>Home Page - Template Inheritance</h1>

<h3>Welcome to . {{data}}</h3>

</div>

{% endblock %}

templates/contact.html

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}



{% block body %}

<div class="container">
 <h1>This is contact page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}

{% block body %}

<h1>This is contact page</h1>

</div>

{% endblock %}

templates/about.html

{% extends 'base.html' %}

{% block title %}About{% endblock %}



{% block body %}

<div class="container">
 <h1>This is our about page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}About{% endblock %}

{% block body %}

<h1>This is our about page</h1>

</div>

{% endblock %}

templates/404.html

{% extends 'base.html' %}

{% block title %}Page Not Found {% endblock %}



{% block body %}

<div class="container">

<h1>Page Not Found</h1>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Page Not Found {% endblock %}

{% block body %}

<h1>Page Not Found</h1>

</div>

{% endblock %}

templates/500.html

{% extends 'base.html' %}

{% block title %}Server Error {% endblock %}



{% block body %}

<div class="container">

<h1>Internal Server Error </h1>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Server Error {% endblock %}

{% block body %}

<h1>Internal Server Error </h1>

</div>

{% endblock %}

Run your flask application and this is the result.

Flask URL Helper Function - Flask url_for() — Flask URL Helper Function – Flask url_for()