如何在Dash应用中同时使用dcc.Link与dte.DataTable？

完全可行，你遇到的页面空白问题本质是动态加载组件时，Dash没有提前注册dash_table_experiments.DataTable组件导致的。因为你的初始布局里只有dcc.Location和空的page-content容器，当通过dcc.Link跳转到/live时才动态返回包含dte.DataTable的布局，而Dash需要在应用启动时就识别所有可能用到的组件类型，否则会渲染失败。

下面给你两种解决思路，按需选择：

方法1：预加载dte组件（保留dash_table_experiments） #

在初始布局中添加一个隐藏的dte.DataTable，让Dash在启动时就完成组件注册，这样动态加载时就能正常渲染了。修改后的代码如下：

import dash
import dash_core_components as dcc
import dash_table_experiments as dte
import dash_html_components as html
from datetime import datetime as dt

app = dash.Dash()

# 初始布局加入隐藏的dte组件，用于预注册
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
    # 隐藏的预加载组件，不会显示在页面上
    html.Div(
        dte.DataTable(rows=[{}]),
        style={'display': 'none'}
    )
])

app.config['suppress_callback_exceptions'] = True

def get_index():
    index = html.Div([
        dcc.Link('Live Data', href='/live')
    ], className='row')
    return index

live = html.Div([
    html.H1('Table '),
    dcc.DatePickerRange(
        id='selected-period',
        initial_visible_month=dt(2018, 4, 5),
        start_date=dt(2018, 4, 22),
        end_date=dt(2018, 4, 25)
    ),
    dte.DataTable(
        rows=[{}],
        row_selectable=True,
        filterable=True,
        sortable=True,
        editable=False,
        id='data-table'
    )
])

@app.callback(
    dash.dependencies.Output('page-content', 'children'),
    [dash.dependencies.Input('url', 'pathname')]
)
def display_correct_page(pathname):
    if pathname == '/live':
        return live
    else:
        return get_index()

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

方法2：升级到官方推荐的dash-table组件（更稳定） #

dash_table_experiments已经被官方弃用，现在推荐使用dash_table组件，它的兼容性和稳定性更好，动态加载时也不需要额外的预注册操作。修改步骤如下：

1. 替换导入语句：把import dash_table_experiments as dte改成from dash import dash_table
2. 调整DataTable的参数名（部分参数有变化），示例修改后的live布局：

live = html.Div([
    html.H1('Table '),
    dcc.DatePickerRange(
        id='selected-period',
        initial_visible_month=dt(2018, 4, 5),
        start_date=dt(2018, 4, 22),
        end_date=dt(2018, 4, 25)
    ),
    dash_table.DataTable(
        data=[{}],
        row_selectable='single',  # 参数名变更，可选'single'/'multi'/False
        filter_action='native',   # 启用原生过滤功能
        sort_action='native',     # 启用原生排序功能
        editable=False,
        id='data-table'
    )
])

内容的提问来源于stack exchange，提问作者Mr. President