Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Shared data across multiple pathname gets overridden

Hi,

I have a dash app with 2 pages (pathnames) in navbar. I am using a hidden div to share data across all pathnames. Data is getting stored in hidden div using callbacks. When I am trying to switch between pages, I see a empty div everytime. Here is my app layout:

app.layout = html.Div([
html.Nav(children=
html.Div(
[
html.A(title, className=‘brand-logo’, href=’/’, style={‘margin-left’: ‘5px’}),
html.Ul(id=‘nav-mobile’, className=‘right hide-on-med-and-down’, children=[
html.Li(children=html.A(‘Dashboard1’, href=’/dashboards/1’)),
html.Li(children=html.A(‘Dashboard2’, href=’/dashboards/2’))
])
])
),
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘intermediate-div’, style={‘display’: ‘none’}),
html.Div(id=‘page-content’)
])

I am using page-content div to populate graphs.

Am I missing something here?

@chriddyp any help with this? Currently have a dash app with about 5 pages and different graphs across them.

Whenever I navigate from one page to another, the computed graphs on the previous pages are lost. Is there a way I can have dash persist the results of the graph when navigating across pages?

It kind of seems like persisting the states of the different components…I don’t know if this current functionality exists. Looking forward to your response

Try using dcc.Link instead of html.A. dcc.Link does page navigation without “reloading” the page, while html.A will reload the page.