Dash多页面应用：替换dcc.Link为dcc.Dropdown后页面切换失效

你遇到的问题是因为dcc.Dropdown本身不会触发Dash的路由跳转，它只是一个输入组件，需要结合dcc.Location组件和回调函数来实现URL更新与页面切换。以下是修复后的完整代码：

import dash
from dash import Dash, html, dcc, Input, Output, State

app = Dash(__name__, use_pages=True)

pages_list = list(dash.page_registry.values())

page_dropdown = dcc.Dropdown(
    id="page-dropdown",
    options=[{"label": page["name"], "value": page["relative_path"]} for page in pages_list],
    value=pages_list[0]["relative_path"]
)

app.layout = html.Div([
    # 必须添加dcc.Location来管理路由状态
    dcc.Location(id='url', refresh=False),
    html.H3("Multi-Page App"),
    page_dropdown,
    dash.page_container
])

# 回调1：Dropdown选中值变化时，更新URL路径
@app.callback(
    Output('url', 'pathname'),
    Input('page-dropdown', 'value'),
    prevent_initial_call=True  # 避免初始加载时重复触发
)
def update_pathname(selected_path):
    return selected_path

# 回调2：URL路径变化时，同步Dropdown的选中值（处理手动修改URL的情况）
@app.callback(
    Output('page-dropdown', 'value'),
    Input('url', 'pathname'),
    prevent_initial_call=False
)
def update_dropdown(pathname):
    # 匹配当前路径对应的页面相对路径
    for page in pages_list:
        if page["relative_path"] == pathname:
            return pathname
    # 如果没有匹配到，返回第一个页面的路径
    return pages_list[0]["relative_path"]

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

关键说明 #

• dcc.Location是Dash路由系统的核心组件，负责监听和更新URL路径，必须添加到布局中。
• 第一个回调将Dropdown的选中值映射到URL的pathname，触发页面切换和URL更新。
• 第二个回调确保手动修改URL时，Dropdown的选中状态会同步更新，保持UI与路由状态一致。
• prevent_initial_call=True用于避免初始加载时回调重复触发，防止不必要的路由跳转。

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