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

[umop_apisdn]

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:

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.

[luisds]

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.

[Emil]

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

Anchor links not working on page load

I have a single-page app where i use anchor links to scroll to the desired sections. If i load the “frontpage” of the app, i.e. without any anchors, and click the links, everything works as intended. However, i am unable to “deep link”, i.e. go directly to an anchor, without loading the page first. Here is a MWE, import dash import dash_html_components as html app = dash.Dash() app.layout = html.Div([html.P("Hello world."), html.A("To the end", href="#end")] + [html.Br()]*100 + …

[umop_apisdn]

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.