Dash Bootstrap 组件 NavLink 未触发回调
Dash Bootstrap Components NavLink not triggering callback
我正在创建一个多页面应用程序,我创建了一个导航栏,其中包含指向不同页面 (URL) 的链接,该导航栏最近神秘地停止工作。我已尝试将所有代码恢复到最后已知的良好状态,但没有修复问题。目前,这只在我的开发机器上被破坏了,实时应用程序仍然有效,但由于这个问题,我无法发布新版本。我在下面包含了所有相关代码的代码片段,希望对这个问题有新的看法,谢谢。
可能值得注意的是,如果我将 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')
])
navbar.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')
])
callbacks.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]
在查看 dbc.NavLink 项目的可用参数后,由于某种原因它似乎无法再自动协商 link 类型。我将参数 external_link=True
添加到 link 本身,然后一切又开始工作了。
我正在创建一个多页面应用程序,我创建了一个导航栏,其中包含指向不同页面 (URL) 的链接,该导航栏最近神秘地停止工作。我已尝试将所有代码恢复到最后已知的良好状态,但没有修复问题。目前,这只在我的开发机器上被破坏了,实时应用程序仍然有效,但由于这个问题,我无法发布新版本。我在下面包含了所有相关代码的代码片段,希望对这个问题有新的看法,谢谢。
可能值得注意的是,如果我将 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')
])
navbar.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')
])
callbacks.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]
在查看 dbc.NavLink 项目的可用参数后,由于某种原因它似乎无法再自动协商 link 类型。我将参数 external_link=True
添加到 link 本身,然后一切又开始工作了。