如何在 Dash 中为相同的 URL 路径设置多个导航 [英] How can I have multiple Navigations for the same URL paths in Dash

问题描述

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

I am trying to add multiple navigations for the same URL path.

我的代码..

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 仅适用于第一次点击，不一致且不适用于后续点击.

Button navigations are working fine, but html.Nav only works on the very first click, not consistent and not working on the following clicks.

请帮忙.

推荐答案

通过测试，问题似乎出在 index_layout 中的这一行:

From testing this out the problem seems to be with this line in index_layout:

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

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

If you look in the console you will see that a lot of requests are sent constantly when you're on the main page (when index_layout is rendered).

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

When this line is removed your code works as expected.

工作解决方案:

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 组件同时呈现，具有相同的 id (url).这显然会导致不断调用回调并导致链接行为不一致.

The problem here I think is that there are two Location components rendered at the same time with the same id (url). This apparently causes the callback to be called constantly and causes inconsistent link behavior.

这篇关于如何在 Dash 中为相同的 URL 路径设置多个导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！