如何在Dash中对同一URL路径进行多个导航

Question

我正在尝试为同一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只在第一次单击时起作用，不一致，并且在接下来的单击中不起作用

请帮忙

Answer 1

通过测试，问题似乎在于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组件使用相同的id（url）同时呈现。这显然会导致不断调用回调，并导致不一致的链接行为