Python flask wont render multiple templates, possibly HTML issue

Question

Updated question: my flask web page is working well, however i am currently editing my 3rd page and its doing something i cant understand. when i click on the third tab of my web app, the URL goes localhost/DC2/DC5, whereas i need it to go localhost/DC5. Im not sure why its jumping through the first page. Here is my flask & the part of my HTML code which i think may be causing this:

<li><a href="/">Homepage</a></li>
<li><a href="DC2">DC2</a></li>
<li class="current_page_item"><a href="/DC5/">DC5</a></li>
<li><a href="Supra">Supra</a></li>
<li><a href="S13">S13</a></li>
<li><a href="S15">S15</a></li>
<li><a href="Chaser">Chaser</a></li>

and here is my flask:

from flask import Flask, render_template, request, redirect, url_for, abort app = Flask( name )

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

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

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

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


if __name__ == "__main__":

app.run(host='0.0.0.0', debug=True)

Any advice would be greatly appreciated.

Answer 1

Your links are relative to the current page. If you're at /DC5/ and click on <a href="S13">S13</a> , you'll end up at /DC5/S13 , not /S13 . You could fix this by making your URLs absolute:

<a href="/S13">S13</a>

Although that's a temporary fix. An easier way to do this would be to use url_for :

<a href="{{ url_for('S13') }}">S13</a>