Dash Multi-Page App URLs do not always execute in the same order

Link/Location/pathname + callbacks issues

It appears that the callbacks driven by pathname from a Location component do not always execute in the same order, leading to behavior like on the https://plot.ly/dash/urls page. Refreshing the urls page quickly and repeatedly leads to one of three cases:

1. The home Plotly Dash page is displayed
2. The home Plotly Dash page is flickered and then the URLs page is displayed
3. The URLs page is displayed.

As a result, trying to have multi-page apps driven by the URL does not work, since callbacks either

1. Receive the pathname as None (assuming that would map to case 1 above), or
2. Do not update at all and pathname keeps the old value (assuming that would also map to case 1 above), or
3. It updates after other callbacks have fired, leading to more requests than necessary (assuming that would map to case 2 above), or
4. Execute as expected, but less than all of the time.

Example

The Multi-Page App URLs demo app confirms this behavior, as the initial page load keeps a ‘404’ on the page regardless if I directly go to /apps/app1 in the URL bar in Chrome.

I updated the display_page callback in the example to

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    print(pathname)
    
    if pathname == '/pages/app1':
        return app1.layout
    elif pathname == '/pages/app2':
        return 'hi!'
    else:
        return '404'

This creates this stack trace:

 * Running on http://127.0.0.1:8889/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 246-948-826
127.0.0.1 - - [13/Sep/2017 15:14:49] "GET /apps/app1 HTTP/1.1" 200 -
127.0.0.1 - - [13/Sep/2017 15:14:50] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [13/Sep/2017 15:14:50] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [13/Sep/2017 15:14:50] "GET /favicon.ico HTTP/1.1" 200 -
None
127.0.0.1 - - [13/Sep/2017 15:14:50] "POST /_dash-update-component HTTP/1.1" 200 -
/apps/app1
127.0.0.1 - - [13/Sep/2017 15:14:50] "POST /_dash-update-component HTTP/1.1" 200 -

The page just renders 404. When I include a dcc.Link('CHANGE URL', href='/pages/app1') component on the page, and click on that, then it changes to the app1 content.

Am I doing something wrong? I copied the exact project structure for this demo, am also seeing it in other apps I’m working on, and there seems to be a clear issue with the https://plot.ly/dash/urls page.

[chriddyp]

Nevermind, I’m able to reproduce the issue now:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

import time

app = dash.Dash()
server = app.server
server.secret_key = 'test'


app.layout = html.Div([
    dcc.Location(id='location'),
    html.Div(id='content')
])


@app.callback(
    Output('content', 'children'),
    [Input('location', 'pathname')])
def display(path):
    print(path)
    if path is None:
        time.sleep(3)
        return ''
    elif path == '/':
        return 'index'
    else:
        return html.H3(path)


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

The issue occurs when the intial request with pathname=None takes longer than the follow up request with pathname='/page-1'. While dash initiates the requests in order, it looks like we aren’t doing a good job of dealing with request responses that come back out of order

[anthonymobile]

i just had this exact problem trying to build a similar url-based routing. this solution worked for me after trying every possible if-then, and try-except combination possible to trap the NoneType error. this bug appears to still be there. (active_route refers to a bus route, not an url route)

@app.callback(
        Output("page-content", "children"),
        [Input("url", "pathname")])
def display_page(pathname):

    if pathname is None:
        return 'Loading...'
    elif pathname == '/':
        active_route='87'
        return create_layout(app, routes, active_route)
    else:
        active_route=(pathname[1:])
        return create_layout(app, routes, active_route)