Plotly Dash应用可运行但布局下方出现404错误，如何消除？

错误原因 #

你同时混用了两种Dash页面路由机制：

1. 自定义的dcc.Location回调路由（通过display_page函数切换页面内容）
2. Dash Pages系统（初始化时设置use_pages=True，布局中加入dash.page_container）

由于未按Dash Pages规范注册页面，dash.page_container无法找到对应页面，因此渲染出404提示，它被放在布局容器末尾，所以出现在页面下方。

解决方案 #

方案一：保留自定义路由，移除Dash Pages相关代码

直接去掉Dash Pages的配置，仅保留原有的自定义回调路由：

修改app.py的关键部分：

# 初始化app时移除use_pages=True参数
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX], suppress_callback_exceptions=True)

# 修改布局，删除dash.page_container
app.layout = dbc.Container([
    html.Div([ 
        dcc.Location(id="url", refresh=False), 
        navbar, 
        content,
    ]),
], fluid=True)

方案二：改用Dash Pages系统，移除自定义路由

遵循Dash Pages规范注册页面，利用官方页面管理机制：

1. 修改pages目录下的页面文件（以statistiques.py为例），添加页面注册代码：

import pandas as pd
import base64

import dash
from dash import html, dcc, callback, Input, Output
import dash_bootstrap_components as dbc

# 注册当前页面，指定路径和名称
dash.register_page(__name__, path="/page-1", name="Statistiques")

layout = dbc.Row(
    [
        dbc.Col([
            html.Label("Emissions of ZINC"),
            dcc.RadioItems(['Low','High'], value='High', id='emissions', labelStyle={'display': 'block'}),
        ], width=2),

        dbc.Col([
            dcc.Graph(id='my-graph', animate=True,
                      animation_options={'transition':{'duration': 750, 'ease': 'cubic-in-out'}}),
        ], width=10)

    ]
)

对accueil.py和geostatistiques.py做同样处理，分别注册路径/和/page-2。

2. 修改app.py，移除自定义路由相关代码：

import pandas as pd
import base64

import dash
from dash import html
import dash_bootstrap_components as dbc

#Read image
img_greenrock ='GREEN-ROCK.jpg'
encoded_imggr = base64.b64encode(open(img_greenrock, 'rb').read())

#Navbar
navbar =dbc.NavbarSimple([
    dbc.NavItem(html.Img(src='data:image/jpg;base64,{}'.format(encoded_imggr.decode()))),
    dbc.NavItem(html.H2("Exploratory Data Analysis")),
    dbc.NavItem(dbc.NavLink("Accueil", href="/", active="exact")),
    dbc.NavItem(dbc.NavLink("Statistiques", href="/page-1", active="exact")),
    dbc.NavItem(dbc.NavLink("Geostastiques", href="/page-2", active="exact")),             
     ])

#My app
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX],use_pages=True,suppress_callback_exceptions=True)

#Structure de l'app
app.layout = dbc.Container([
    navbar,
    dash.page_container  # 由Dash Pages自动加载注册的页面
],fluid=True)

# 移除原本的display_page回调函数

if __name__ == "__main__":
    app.run_server(debug=True)

选择建议 #

• 若习惯手动控制页面路由逻辑，选方案一；
• 若想利用Dash Pages的自动导航、页面元数据管理等特性，选方案二。

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