Navbar links not triggering url callback on heroku, works fine on development

Dash Python
1

I’m a little perplexed by this. I followed some guides for a multi-page app with a navbar. Switching between pages works fine in development, but in Heroku the callback never gets triggered when you click the links. It updates my browers URL but there’s no following callback like there is in deployment. I have to reload the app the get the page to switch (at which point the callback is getting triggered). Any help is much appreciated.

github link: GitHub - mackwn/dashdiffeq: interactive simple finite differences solver for basic diff eq. Purpose to learn Dash.
heroku app: https://dashdiffeq410.herokuapp.com/

index.py

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])




@app.callback(Output('page-content','children'),
                [Input('url','pathname')])
def display_page(pathname):
    print('pathname:{pathname}'.format(pathname=pathname))
    if pathname == '/app2del': return  app2del.layout
    elif pathname == '/app1dpar': return app1dpar.layout
    elif pathname == '/' : return about.layout
    else: return '404'

navbar.py
navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Home", href="/")),
        dbc.DropdownMenu(
            children=[
                #dbc.DropdownMenuItem("Apps", header=True),
                dbc.DropdownMenuItem("2D Elliptical", href="/app2del"),
                dbc.DropdownMenuItem("1D Parabolic", href="/app1dpar"),
            ],
            nav=True,
            in_navbar=True,
            label="Apps",
        ),
    ],
    brand="SM Github",
    brand_href="https://github.com/mackwn/dashdiffeq",
    color="primary",
    dark=True,
)
2

It’s very likely to do with the versions of Dash / dash-bootstrap-components you have installed. If you have Dash>=1.9.0 you need dash-bootstrap-components>=0.8.3. This is because the way internal links work changed in Dash 1.9.0.

Actually I just checked your requirements.txt and it seems you have a relatively old version of Dash but a relatively new version of dash-bootstrap-components. I suggest you bump the version number of Dash to something more recent.

3

That did the trick! Thanks!

1 Like