如何在Plotly Dash中根据URL的project_key展示内容或404错误？

先说明原代码存在的几个问题：

• 布局中dcc.Location语句末尾缺失逗号，会触发语法错误
• 正则表达式project_key=(\w+)&无法匹配参数位于URL末尾的情况（比如?project_key=xxx无后续&）
• 回调返回的布局重复使用page-content ID，会导致DOM元素冲突
• 未处理参数不存在的异常场景，会直接抛出运行错误
• 缺少图表渲染的核心逻辑

以下是修正后的完整实现代码：

import re
import dash
from dash import html, dcc, Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),  # 补上缺失的逗号
    html.Div(id='page-content')
])

@app.callback(
    Output('page-content', 'children'),
    Input('url', 'search')
)
def render_page_content(search):
    # 兼容参数在URL任意位置的正则匹配
    project_key_match = re.search(r'project_key=(\w+)', search)
    if not project_key_match:
        # 参数不存在时返回404页面
        return html.Div([
            html.H1("404", style={'textAlign': 'center', 'fontSize': '4rem'}),
            html.P("请求的页面不存在，请检查URL参数", style={'textAlign': 'center'})
        ], style={'padding': '5rem'})
    
    project_key = project_key_match.group(1)
    if project_key == 'U9sD0DItDJ0479kiFPG8':
        # 参数匹配成功，返回带下拉菜单和图表容器的布局
        return html.Div([
            dcc.Dropdown(
                options=[{'label': '柱状图', 'value': 'bar'}, {'label': '饼图', 'value': 'pie'}],
                id='graph-type-dropdown',
                value='bar',
                placeholder='选择图表类型',
                style={'width': '50%', 'margin': '1rem 0'}
            ),
            html.Div(id='graph-container')  # 独立图表容器，避免ID冲突
        ], style={'padding': '2rem'})
    else:
        # 参数不匹配时返回权限错误页面
        return html.Div([
            html.H1("403/404", style={'textAlign': 'center', 'fontSize': '4rem'}),
            html.P("无权限访问该页面或页面不存在", style={'textAlign': 'center'})
        ], style={'padding': '5rem'})

# 新增图表渲染回调，根据下拉选项生成对应图表
@app.callback(
    Output('graph-container', 'children'),
    Input('graph-type-dropdown', 'value')
)
def render_graph(selected_type):
    # 示例图表逻辑，可替换为实际业务数据
    if selected_type == 'bar':
        return dcc.Graph(
            figure={
                'data': [{'x': ['A', 'B', 'C'], 'y': [4, 2, 7], 'type': 'bar'}],
                'layout': {'title': '柱状图示例'}
            }
        )
    elif selected_type == 'pie':
        return dcc.Graph(
            figure={
                'data': [{'labels': ['A', 'B', 'C'], 'values': [30, 40, 30], 'type': 'pie'}],
                'layout': {'title': '饼图示例'}
            }
        )

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

关键改进说明 #

• URL参数兼容：调整正则表达式，适配参数在URL末尾的情况，同时增加参数不存在的判断，避免程序崩溃
• DOM结构优化：移除重复ID，使用独立的图表容器，避免元素冲突
• 错误页面标准化：参数不匹配或缺失时，返回带样式的404/403页面，提升用户体验
• 完整功能实现：新增下拉菜单触发的图表渲染逻辑，完成"选择图表类型展示对应图表"的需求
• 基础语法修复：补全布局中缺失的逗号，解决语法错误

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