Flask项目导航栏跳转报错：已配置路由仍无法访问页面

问题根源 #

导航栏链接的href写的是静态HTML文件名（比如index.html），但Flask的路由配置的是路径形式（比如/index），两者不匹配导致请求地址错误；同时未配置的导航项（Login/Register、Create your closet）缺少对应路由，自然也会返回404。

解决方案 #

1. 修正导航栏链接路径 #

把导航栏里的href值改成Flask路由定义的路径，而非HTML文件名：

<!--navigation bar-->
<header>
<nav>  
    <ul>  
    <li><a href="/index"> About </a></li>  
    <li><a href="/home"> Home </a> </li>  
    <li><a href="/login_register">Login/Register </a> </li>  
    <li> <a href="/create_closet"> Create your closet </a> </li>  
    </ul>  
</nav>  
</header>

2. 补充未配置的路由 #

在app.py中为所有导航页面添加对应的路由和视图函数，确保每个链接都有处理逻辑：

from flask import Flask, render_template, redirect  # 新增redirect导入
import os

prerna = os.path.join('static','pic.png')
prerna2 = os.path.join('static','Untitled.png')
prerna3 = os.path.join('static','wardrobe.png')
video = os.path.join('static','DigitalWardrobe.mp4')

app = Flask(__name__)

# 根路径重定向到主页，优化访问体验
@app.route('/')
def root():
    return redirect('/home')

@app.route('/index')
def index():
    return render_template("index.html",img = prerna2,img1 = prerna,img2 = prerna3,vid=video)

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

# 新增Login/Register页面路由
@app.route('/login_register')
def login_register():
    return render_template("login_register.html")

# 新增Create your closet页面路由
@app.route('/create_closet')
def create_closet():
    return render_template("createCloset.html")

if __name__=="__main__":
    app.run(debug=True,port=8000)

核心注意事项 #

• Flask是基于路由匹配的框架，不能直接通过HTML文件名访问页面，所有可访问的页面都需要用@app.route()定义路由，再通过视图函数返回渲染后的模板。
• 开启debug=True模式后，修改代码会自动重启服务，方便调试。

内容的提问来源于stack exchange，提问作者Prerna