Dash 多页面布局（建议收藏）

快速解决

Dash 多页面布局的核心在于使用 pages 模块和路由配置，以下代码可快速构建包含首页和子页面的 Dash 应用：

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, use_pages=True)  # 启用多页面功能
app.layout = html.Div([
    html.H1("主应用标题"),
    dcc.Location(id="url"),
    html.Div(id="page-content", children=dash.page_container)  # 动态渲染子页面
])

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

常用方法

以下是 Dash 多页面布局的 6 个核心方法及使用频率排序：

详细说明

路由配置详解

在 app.py 中配置路由，通过 pages 字典自动识别子页面：

import dash
from dash import html

app = dash.Dash(__name__, use_pages=True)  # 启用多页面功能
app.layout = html.Div([
    html.H1("主应用标题"),
    html.Div(id="page-content", children=dash.page_container)  # 动态渲染子页面
])

子页面注册方式

每个子页面需用 dash.register_page 注册，支持 3 种配置方式：

import dash
from dash import html

dash.register_page(__name__, path="/first")  # 注册子页面并指定路径
layout = html.Div([
    html.H2("第一个子页面"),
    html.P("内容区域")
])

import dash
from dash import html

dash.register_page(__name__, path="/second")  # 注册第二个子页面
layout = html.Div([
    html.H2("第二个子页面"),
    html.P("更多数据可视化")
])

高级技巧

动态加载页面内容

通过 pages 字典动态生成导航栏，实现与子页面的联动：

from dash import html, dcc

nav_links = [html.Li(dcc.Link(f"{page['name']}", href=page["path"])) for page in dash.page_registry.values()]
app.layout = html.Div([
    html.H1("主应用标题"),
    html.Ul(nav_links),  # 动态生成导航链接
    html.Div(id="page-content", children=dash.page_container)
])

页面参数传递与处理

使用 URL 参数实现子页面数据传递，例如 /user/123 路径的用户 ID 查询：

import re
from dash.dependencies import Input, Output

dash.register_page(__name__, path_template="/user/<user_id>")

@app.callback(Output("output", "children"), Input("url", "pathname"))
def display_user(pathname):
    match = re.match(r"/user/(\d+)", pathname)  # 正则提取参数
    if match:
        user_id = match.group(1)
        return f"显示用户 ID：{user_id}"

常见问题

Q1: 如何实现 Dash 多页面布局的 404 页面？
A1: 使用 pages 字典校验路径，返回自定义提示：

from dash import html

app.layout = html.Div([
    html.H1("主应用标题"),
    html.Div(id="page-content", children=dash.page_container),
    html.Div(id="404-message", children=[
        html.H2("页面未找到", style={"display": "none"})
    ])
])

Q2: 子页面间如何共享样式和组件？
A2: 在 assets 目录存放 CSS 文件，或使用 dbc 全局组件库

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

总结

Dash 多页面布局通过 use_pages 和 page_container 实现模块化开发，支持动态导航和参数传递，适合构建多功能数据仪表盘。