时间戳

首页 > 解决方案 > 如何在 Dash 中为相同的 URL 路径提供多个导航

python - 如何在 Dash 中为相同的 URL 路径提供多个导航

问题描述

我正在尝试为同一 URL 路径添加多个导航。

我的代码..

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


app = dash.Dash()

index_layout = html.Div([
    # represents the URL bar, doesn't render anything
    dcc.Location(id='url', refresh=False),

    
    html.Br(),
    
    dcc.Link(dbc.Button('Page1',
                        color="secondary",
                        className="mr-1",
                        outline=True,
                        style={"width":400,
                        "vertical-align": "middle",
                        }
                        ), href='/page1'),
    html.Br(),html.Br(),html.Br(),html.Br(),html.Br(),
    dcc.Link(dbc.Button("Page2",
                        style={"width":400,
                        "vertical-align": "middle"},
                        color="secondary",
                        className="mr-1",
                        outline=True
                        ), href='/page2'),
    

])


page1_layout = html.H1("Page1")
page2_layout = html.H1("Page2")

app.layout = html.Div([
    dcc.Location(id='url-nav', refresh=True),

    html.Span(dbc.Nav(
    [
        dbc.NavLink(dbc.NavLink("Page1", href="/page1")),
        dbc.NavLink(dbc.NavLink("Page2", href="/page2")),

    ],

    pills=True,),
     className="ml-auto"
),
    dcc.Location(id='url', refresh=True),
    html.Center([
    html.H3('DEMO AP',id='title'),
    # content will be rendered in this element
    html.Div(id='page-content'),
    ],),
])



### CALLBACKS

@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname="/"):
    
    ctx = dash.callback_context
    triggered_by = ctx.triggered[0].get("prop_id")

    if pathname == "/page1":
        return page1_layout

    elif pathname == "/page2":
        return page2_layout

    else:
        return index_layout


if __name__ == "__main__":
    app.run_server()

按钮导航工作正常，但html.Nav仅适用于第一次点击，不一致且不适用于后续点击。

请帮忙。

标签： pythonpython-3.xplotly-dash

解决方案

通过对此进行测试，问题似乎出在以下行index_layout：

dcc.Location(id='url', refresh=False),

如果您查看控制台，您会看到当您在主页上时index_layout（呈现时）会不断发送大量请求。

删除此行后，您的代码将按预期工作。

工作解决方案：

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


app = dash.Dash()

index_layout = html.Div(
    [
        html.Br(),
        dcc.Link(
            dbc.Button(
                "Page1",
                color="secondary",
                className="mr-1",
                outline=True,
                style={
                    "width": 400,
                    "vertical-align": "middle",
                },
            ),
            href="/page1",
        ),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        dcc.Link(
            dbc.Button(
                "Page2",
                style={"width": 400, "vertical-align": "middle"},
                color="secondary",
                className="mr-1",
                outline=True,
            ),
            href="/page2",
        ),
    ]
)


page1_layout = html.H1("Page1")
page2_layout = html.H1("Page2")

app.layout = html.Div(
    [
        dcc.Location(id="url-nav", refresh=True),
        html.Span(
            dbc.Nav(
                [
                    dbc.NavLink(dbc.NavLink("Page1", href="/page1")),
                    dbc.NavLink(dbc.NavLink("Page2", href="/page2")),
                ],
                pills=True,
            ),
            className="ml-auto",
        ),
        dcc.Location(id="url", refresh=True),
        html.Center(
            [
                html.H3("DEMO AP", id="title"),
                # content will be rendered in this element
                html.Div(id="page-content"),
            ],
        ),
    ]
)


### CALLBACKS


@app.callback(
    dash.dependencies.Output("page-content", "children"),
    [dash.dependencies.Input("url", "pathname")],
)
def display_page(pathname="/"):

    ctx = dash.callback_context
    triggered_by = ctx.triggered[0].get("prop_id")

    if pathname == "/page1":
        return page1_layout

    elif pathname == "/page2":
        return page2_layout

    else:
        return index_layout


if __name__ == "__main__":
    app.run_server()

我认为这里的问题是有两个组件使用相同的（）Location同时呈现。这显然会导致回调被不断调用并导致不一致的链接行为。idurl

推荐阅读