[FIXED] How to navigate between html files using Flask and render_template libraries?

Issue

I downloaded a web template from https://html5up.net/forty and modified the directory as follow to meet the requirement of render_template

The server.py code is

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def homepage():
    return render_template('index.html')

# @app.route('/landing')
# def landing():
#     return render_template('landing.html')

if __name__ == "__main.py__":
    app.debug(Debug = True)

The index.html and the "menu" code is:

<!-- Menu -->
                    <nav id="menu">
                        <ul class="links">
                            <li><a href="templates/index.html">Home</a></li>
                            <li><a href="templates/landing.html">Landing</a></li>
                            <li><a href="templates/generic.html">Generic</a></li>
                            <li><a href="templates/elements.html">Elements</a></li>
                        </ul>
                        <ul class="actions stacked">
                            <li><a href="#" class="button primary fit">Get Started</a></li>
                            <li><a href="#" class="button fit">Log In</a></li>
                        </ul>
                    </nav>

For some reason, the links don't work. When entering/clicking http://127.0.0.1:5000/templates/landing.html I keep getting the error code 404.

To verify the landing.html was working properly, I included an app.route to the landing.html and it worked just fine.

Thanks in advance!

Solution

You provided half of the solution yourself.

It is a good practice to have one route for each html page you want to be able to render

@app.route('/landing')
def landing():
    return render_template('landing.html')

@app.route('/generic')
def generic():
    return render_template('generic.html')

And so on for all your routes / templates.

Then in the menu you do not use a href to the html file you instead want to direct the user to one of the routes which serve the templates. This can be done with flasks/jinjas url_for. Read more about this method here.

Your menu would then look like this:

<nav id="menu">
    <ul class="links">
        <li><a href={{url_for("home")}>Home</a></li>
        <li><a href={{url_for("landing")}>Landing</a></li>
        <li><a href={{url_for("generic")}>Generic</a></li>
        <li><a href={{url_for("elements")}>Elements</a></li>
    </ul>
    <ul class="actions stacked">
        <li><a href="#" class="button primary fit">Get Started</a></li>
        <li><a href="#" class="button fit">Log In</a></li>
    </ul>
</nav>

Answered By - Lenntror