Why does reloading the Dash app always lead back to the homepage?

Dash Python
1

I have set up a multi-page Dash application following the fantastic Dash documentation.

However, whenever I refresh the application on a page that is not the homepage, the Dash application will automatically route me back to the homepage:

dash_problem
dash_problem740×326 2.43 MB

In this gif, I navigated the application to another page compare_clusters using a tab component. However, when I refresh the page, it goes back to find_clusters. What could be wrong here?

The routing section is in index.py:

@app.callback(Output('page-content', 'children'),
        [Input('url', 'pathname')])
def display_page(pathname):
  if pathname == '/' or pathname == '/pages/find_clusters':
    return find_clusters.layout
  elif pathname == '/pages/compare_clusters':
    return compare_clusters.layout
  else:
    return '404'

I am using Dash v1.12.0 with Python 3.

2

The routing section seems fine. It could be something related to the way the tabs are being handled so when the session is restarted it falls to the “find clusters” tab as a default irrespective of the pathname.

1 Like
3

I have experienced similar problems with anchor links, which I solved by invoking a delayed window scroll,

1 Like
4

Thanks @luisds and @Emil for your inputs! @luisds, your comment led me to the root of the problem. The reason why that was happening was because I only updated the layout when the tab was clicked. This means that the url is not really changed (especially the href property) since I had this bit of code:

@app.callback(
  Output('url', 'pathname'),
  [Input('tabs', 'value')]
 )
def update_route(url):
  return f'/pages/{url}'

I resolved the issue by manually creating “tabs” which were really button elements wrapped in link elements.