首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >不触发回调的Dash引导组件NavLink

不触发回调的Dash引导组件NavLink
EN

Stack Overflow用户
提问于 2020-02-28 14:54:11
回答 1查看 2.8K关注 0票数 5

我正在创建一个多页应用程序,我已经创建了一个导航栏,链接到不同的页面(URL),最近它神秘地停止了工作。我已经尝试将所有代码恢复到最后一个已知的良好状态,但它没有修复这个问题。目前,这只在我的开发机器上被破坏,并且活的应用程序仍然工作,但由于这个问题,我不能发布新的版本。我已经为所有相关代码提供了下面的代码片段,并希望对此问题有一个全新的关注,谢谢。

值得注意的是,如果我将dbc.NavLink更改为dbc.Link,一切都可以正常工作,但它没有正确地布局,或者在页面中出现活动按钮,因此这不是所需的选项。

这是我的版本

代码语言:javascript
复制
dash-bootstrap-components 0.7.1
dash-core-components 1.8.0
dash-html-components 1.0.2

app.py

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
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]
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-28 15:41:56

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

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60454165

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档