multi-page dash app
create a '/pages' subfolder
create an individual .py file for each page in the subfolder
In every page, add the below line to register the page
dash.register_page(__name__)
In every page, define a variable 'layout' to specify the page content
create an app.py file in the main folder
declare in the app.py that it will use multiple pages
app = Dash(__name__, use_pages=True)
the app.py has its own layout, something like a frame to enclose the sub pages.
make sure add page_container to the app.py layout for displaying the sub pages.
dash.page_container
Below is an example structure of a multi-page dash app
- app.py
- pages
|-- analytics.py
|-- home.py
|-- archive.py
The app.py is the home page with a frame.
The actual pages home, archive and analytics are sub pages embedded within the frame.
by default the app.py shows the home.py.
This is the app.py. The entry point of the app.
The dcc.Link provides a link to each sub page.
The dash.page_container displays the sub page selected through the link.
from dash import Dash, html, dcc
import dash
app = Dash(__name__, use_pages=True)
app.layout = html.Div([
html.H1('Multi-page app with Dash Pages'),
html.Div(
[
html.Div(
dcc.Link(
f"{page['name']} - {page['path']}", href=page["relative_path"]
)
)
for page in dash.page_registry.values()
]
),
dash.page_container
])
if __name__ == '__main__':
app.run_server(debug=True)
The following are the subpages.
The home.py page is registerd as root path '/'. If no root path is registered, the dash.page_container doesn't know what to show when first visited, so 404 not found.
import dash
from dash import html, dcc
dash.register_page(__name__, path='/')
layout = html.Div(children=[
html.H1(children='This is our Home page'),
html.Div(children='''
This is our Home page content.
'''),
])
Nothing special about the archive.py
import dash
from dash import html, dcc
dash.register_page(__name__)
layout = html.Div(children=[
html.H1(children='This is our Archive page'),
html.Div(children='''
This is our Archive page content.
'''),
])
The analytics.py page has a callback
import dash
from dash import html, dcc, callback, Input, Output
dash.register_page(__name__)
layout = html.Div(children=[
html.H1(children='This is our Analytics page'),
html.Div([
"Select a city: ",
dcc.RadioItems(['New York City', 'Montreal','San Francisco'],
'Montreal',
id='analytics-input')
]),
html.Br(),
html.Div(id='analytics-output'),
])
@callback(
Output(component_id='analytics-output', component_property='children'),
Input(component_id='analytics-input', component_property='value')
)
def update_city_selected(input_value):
return f'You selected: {input_value}'