Dash Bootstrap 组件 NavLink 未触发回调

Posted 2023-02-18

【中文标题】Dash Bootstrap 组件 NavLink 未触发回调

【英文标题】：Dash Bootstrap Components NavLink not triggering callback

【发布时间】：2020-06-12 16:50:49

【问题描述】：

我正在创建一个多页面应用程序，并且我创建了一个导航栏，其中包含指向不同页面 (URL) 的链接，这些页面最近神秘地停止工作。我已经尝试将所有代码恢复到最后一个已知的良好状态，但它没有修复问题。目前，这仅在我的开发机器上被破坏，实时应用程序仍然有效，但由于这个问题，我无法发布新版本。我在下面包含了所有相关代码的代码 sn-ps，希望能以全新的眼光看待这个问题，谢谢。

可能值得注意的是，如果我将 dbc.NavLink 更改为 dbc.Link 一切正常，但布局不正确或在页面中时具有活动按钮外观，因此这不是所需的选项。

这是我的版本

dash-bootstrap-components 0.7.1
dash-core-components 1.8.0
dash-html-components 1.0.2

app.py

import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

from server import app

app.layout = htm.Div([
    html.Link(rel='shortcut icon', href='assets/images/favicon/ico'),
    dcc.Store(id='session-store', storage_type='session'),
    dcc.Location(id='url', refresh=False),
    html.Nav(id='navbar-container'),
    html.Div(id='page-content')
])

导航栏.py

import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

def navbar():
    layout = html.Nav([
        dbc.Nav([
            dbc.NavItem(dbc.NavLink('Home', id='home-link', href='/')),
            dbc.NavItem(dbc.NavLink('Employees', id='employee-link', href='/employees')),
            dbc.NavItem(dbc.NavLink('Programs', id='programs-link', href='/programs')),
            dbc.NavItem(dbc.NavLink('Capacity', id='capacity-link', href='/capacity'))
            ],
            pills=True,
            id='navbar')
    ])

回调.py

from dash.dependencies import Output, Input, State
from pages import home, employees, programs, capacity
from assets.navbar import navbar

page_list = '', 'employees', 'programs', 'capacity']


@app.callback(Output('page-content', 'children'),
             [Input('url', 'pathname')],
             [State('session-store', 'data')])
def display_page(pathname, data):
    if pathname == '/':
        return home.home_page_layout(data)
    if pathname == '/employees':
        return employees.employee_page_layout(data)
    if pathname == '/programs':
        return programs.program_page_layout()
    if pathname == '/capacity':
        return capacity.capacity_page_layout()

@app.callback([Output('navbar-container', 'children'),
               Output('home-link', 'active'),
               Output('employees-link', 'active'),
               Output('programs-link', 'active'),
               Output('capacity-link', 'active')],
              [Input('url', 'pathname')],
              [State('navbar-container', 'children')])
def navbar_state(pathanem, data):
    active_link = ([pathname == f'/i' for i in page_list])
    return navbar(data), active_link[0], active_link[1], active_link[2], active_link[3]

【参考方案1】：

查看 dbc.NavLink 项的可用参数后，由于某种原因，它似乎无法再自动协商链接类型。我将参数 external_link=True 添加到链接本身，一切又开始工作了。

【讨论】：

这是NavLink 的几乎每个用户都可以观察到的重大故障。作者knows it since Feb. 4, 2021 但好像3个月后无法修复。非常感谢这个简洁的拯救生命的解决方法！

@BillHuang 感谢您对此的精彩反馈。请务必对此表示赞同。总是很高兴帮助别人解决问题。先生，祝您项目的其余部分好运！