如何通过Dash Dropdown回调实现URL路径名动态变更

要实现Dropdown选中值变化时自动修改URL路径，你需要补充以下三处修改：

1. 给Dropdown组件添加唯一ID #

修改你现有Dropdown的定义，加上id属性用于回调绑定：

dropdown = dcc.Dropdown(
    id="nav-dropdown", # 新增的唯一ID
    options=[
        {'label': 'Overview', 'value': 'Overview'},
        {'label': 'Details', 'value': 'Iteration 1'},
        {'label': 'Raw Data', 'value': 'Raw Data'},
    ],
    value='Overview',
)

2. 根布局新增dcc.Location组件 #

dcc.Location是Dash操作浏览器地址栏的核心组件，需要放在应用的根布局中：

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

app = dash.Dash(__name__)

app.layout = html.Div([
    # 新增Location组件，refresh设为False避免跳转时刷新整页
    dcc.Location(id="url", refresh=False),
    Header(app),
    # 你的其他页面内容容器
    html.Div(id="page-content")
])

3. 添加路径更新回调 #

绑定Dropdown选中值到Location的pathname属性，实现URL自动更新：

@app.callback(
    Output("url", "pathname"),
    Input("nav-dropdown", "value")
)
def update_url_path(selected_val):
    # 可根据自己的路由规则自定义路径映射关系
    path_rule = {
        "Overview": "/overview",
        "Iteration 1": "/details",
        "Raw Data": "/raw-data"
    }
    # 没有匹配规则时默认返回首页路径
    return path_rule.get(selected_val, "/overview")

如果不需要自定义路径映射，也可以直接把选中值格式化后作为路径：

def update_url_path(selected_val):
    # 替换空格为横杠、转小写，直接生成路径
    return f"/{selected_val.replace(' ', '-').lower()}"

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