使用 DBC 导航栏的 Dash 多页面应用程序

Question

我正在尝试从https://github.com/AnnMarieW/dash-multi-page-app-demos/tree/main复制“multi_page_example1”。这使用下拉菜单导航到不同的页面。

但是，我想将导航栏选项调整为标准链接，如第一个示例所示：https://dash-bootstrap-components.opensource.faculty.ai/docs/components/navbar/

简单的例子如下：

文件夹结构:

- app.py
- app_pages
   |-- home.py
   |-- data_upload.py
   |-- __init__.py

home.py：

import dash
from dash import html

dash.register_page(__name__, path = '/')

layout = html.Div(children=[
        html.H1(children='This is our Home page')

])

data_upload.py：

import dash
from dash import html

dash.register_page(__name__)

layout = html.Div(children=[
        html.H1(children='This is our upload page')
])

app.py：

import dash_bootstrap_components as dbc
import dash

app = dash.Dash(__name__, 
                pages_folder = "app_pages",
                use_pages = True, 
                external_stylesheets=[dbc.themes.BOOTSTRAP])

navbar = dbc.NavbarSimple(
            children=[
                dbc.NavItem(dbc.NavLink("Home", href="/home")),
                dbc.NavItem(dbc.NavLink("Data upload", href="/data_upload")),
            ],
            brand="Multipage Dash App",
            color="dark",
            dark=True,
            className="mb2",
            )

app.layout = dbc.Container(
    [navbar, dash.page_container],
    fluid = True)

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

问题：

1 - 必须运行“调试”为 false，因为服务器不会启动 Dash 应用程序。

2 - 当它启动时，我可以看到带有导航栏链接的基本网络应用程序。但是，在页面之间单击会生成“404 - 未找到页面”消息。奇怪的是，主页最初显示正常消息，但单击链接后却显示 404。

我哪里出错了？

这是我第一次使用引导组件和 Dash 多页面方法。我希望将当前仅基于选项卡的 Dash Web 应用程序重新配置为在各个页面中具有选项卡布局的多页面应用程序。

Answer 1

单个

app.py

文件可以包含多页面 Dash Web 应用程序的所有必要组件

例如，使用您提供的代码并将其合并到一个文件中：

下面，“主页”和“数据上传”页面的布局在同一个文件中定义，并带有一个回调，该回调根据当前 URL 路径通过

dcc.Location

更新页面内容容器。

from dash import Dash, Input, Output
from dash import html, dcc

import dash_bootstrap_components as dbc

home_layout = html.Div(children=[html.H1(children="This is our Home page")])

data_upload_layout = html.Div(
    children=[html.H1(children="This is our upload page")]
)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Home", href="/")),
        dbc.NavItem(dbc.NavLink("Data upload", href="/data_upload")),
    ],
    brand="Multipage Dash App",
    color="dark",
    dark=True,
    className="mb-2",
)

app.layout = html.Div(
    [
        dcc.Location(id="url", refresh=False),
        navbar,
        dbc.Container(id="page-content", className="mb-4", fluid=True),
    ]
)


@app.callback(Output("page-content", "children"), Input("url", "pathname"))
def display_page(pathname):
    if pathname == "/":
        return home_layout
    elif pathname == "/data_upload":
        return data_upload_layout
    else:
        return dbc.Jumbotron(
            [
                html.H1("404: Not found", className="text-danger"),
                html.Hr(),
                html.P(f"The pathname {pathname} was not recognized..."),
            ]
        )


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

→ 产生此应用程序行为：

^{注意：必须对您的代码进行一些更改 - 主要的一个是您没有正确定义和使用}

app

对象（在定义它时不需要这些额外的参数，并且您不需要使用

dash.page_container

）。