如何在 Plotly Dash 中管理多个页面的路径名前缀？

Question

我有一个使用 Python Plotly 的多页 Dash 应用程序。 该应用程序由一个托管导航栏的主页、一个地图页面和 2 个绘图页面组成。 整个应用程序将托管在需要特定路径前缀的服务器上，使用：

dash.register_page(__name__,    
    requests_pathname_prefix="/app/SWAPIT/",
    routes_pathname_prefix="/app/SWAPIT/"
)

主页可以正常工作，我可以导航到地图页面，但绘图页面会出现 404 Not Found 错误，尽管所有 3 个页面都使用相同的前缀并且在导航栏代码中具有相同的 href。

代码树如下：

main
  -app.py
  -navbar.py
  pages
   -map.py
   -page_1.py
   -page_2.py

当我将光标悬停时，链接显示为 localhost:8080/app/SWAIT/... 每个链接看起来都是正确的，所以我无法弄清楚我做错了什么。 我已经使用网上找到的各种示例创建了多页面应用程序，但它们都没有使用路径名前缀，这就是我感到困惑的地方。 如何应用前缀？ 它是否包含在导航栏 href 中？

主要应用程序代码：

NAVBAR = create_navbar()
# To use Font Awesome Icons
FA621 = "./all.css"
APP_TITLE = "Multipage Dash App"
(__name__, )
app = dash.Dash(
    __name__,
    suppress_callback_exceptions=True,
    external_stylesheets=[
        dbc.themes.LUX,  # Dash Themes CSS
        FA621,  # Font Awesome Icons CSS
    ],
    title=APP_TITLE,
    use_pages=True,  # New in Dash 2.7 - Allows us to register pages
    requests_pathname_prefix="/app/SWAPIT/",
    routes_pathname_prefix="/app/SWAPIT/"
)


app.layout = dcc.Loading(  # <- Wrap App with Loading Component
    id='loading_page_content',
    children=[
        html.Div(
            [
                NAVBAR,
                dash.page_container
            ]
        )
    ],
    color='primary',  # <- Color of the loading spinner
    fullscreen=True  # <- Loading Spinner should take up full screen
)

server = app.server


if __name__ == '__main__':
    # app.run_server(debug=False, host='0.0.0.0', port=8080)
    app.run(debug=False, host='0.0.0.0', port=8080)

导航栏代码：

def create_navbar():
    navbar = dbc.NavbarSimple(
        children=[
            dbc.NavItem(
                dbc.NavLink("Map", active=True, href="/app/SWAPIT/map", target="_blank")
                ),

            dbc.NavItem(
                dbc.NavLink("Ambient Temperature", active=True, href="/app/SWAPIT/page_1", target="_blank")
                ),

            dbc.NavItem(
                dbc.NavLink("Gases", active=True, href="/app/SWAPIT/page_2", target="_blank")
                ),

            dbc.DropdownMenu(
                nav=True,
                in_navbar=True,
                label="Menu",
                align_end=True,
                children=[  # Add as many menu items as you need
                    dbc.DropdownMenuItem("Home", href='/'),
                    dbc.DropdownMenuItem(divider=True),
                    dbc.DropdownMenuItem("Map", href='/app/SWAPIT/map'),
                    dbc.DropdownMenuItem("Ambient Temperature", href='/app/SWAPIT/page_1'),
                    dbc.DropdownMenuItem("Gases", href='/app/SWAPIT/page_2'),
                ],
            ),
        ],
        brand='Home',
        brand_href="/app/SWAPIT/",
        # sticky="top",  # Uncomment if you want the navbar to always appear at the top on scroll.
        color="dark",  # Change this to change color of the navbar e.g. "primary", "secondary" etc.
        dark=True,  # Change this to change color of text within the navbar (False for dark text)
    )

    return navbar

每个页面都有相同的前缀： 我懒得展示页面中的内容，因为 contnet 与我的问题没有密切关系，只会让事情变得混乱。

# register this as a page in the app
dash.register_page(__name__,    
    requests_pathname_prefix="/app/SWAPIT/",
    routes_pathname_prefix="/app/SWAPIT/"
)

我也在导航栏链接中尝试过（例如）：

href='./pages/pages_1'

和

href='/app/SWAPIT/pages/page_1

那些也不起作用。 非常感谢任何帮助！

Answer 1

我能够在 https://github.com/plotly/dash-labs/tree/main/docs/demos/multi_page_nested_folders 上的嵌套文件夹示例中进行多页面工作，并进行以下更改：

1. 将

   url_base_pathname

   添加到

   dash.Dash

url_prefix = "/app/SWAPIT/"
app = dash.Dash(
    __name__,
    plugins=[dl.plugins.pages],
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME],
    url_base_pathname=url_prefix
)

这似乎处理路径和路线，但此时的页面不知道前缀。

2. 为链接添加前缀

page['path']

不知道前缀 - 因此每个链接也需要包含前缀。

href=url_prefix + page["path"]

3. 运行示例存储库需要一些 pip 包魔法，因为某些 dash 组件与最新的 Flask 版本不兼容。这是我的要求

dash >=2.18.1
dash-bootstrap-components >=1.6.0
Flask==2.1.0
Werkzeug==2.2.2