dcc.Location - inconsistency when trying to navigate from one page to another in multipage app

Dash Python
1

I have a multi page app

dash - 2.17.1
dcc - 2.14.1
html - 2.0.18
dash_table - 5.2.11
Windows OS
Browser - Edge

I have a multi-page Dash app with a home page and a detail page (using the path template /detail/:id. On the home page, there’s a dropdown for selecting IDs. When an ID is selected, it should redirect to /detail/:selected id using dcc.Location. This is done through a callback on the homepage.

data is a df with name and id columns

> layout = dbc.Container([
>     dbc.Row([
>         dbc.Col([
>             html.H6("Analysis", className="app-subtitle text-center"),
>             dcc.Dropdown(
>                 id="dropdown-results",
>                 options=[],
>                 placeholder="Search by Name or ID",
>                 multi=False,
>                 value=None
>             ),
>             dcc.Location(id='url', refresh=True),
>         ], width=8),
>     ], justify='center', align='center'),
> ], fluid=True)
> 
> @callback(
>     Output("dropdown-results", "options"),
>     Input("dropdown-results", "search_value")
> )
> def update_dropdown(search_value):
>     if not search_value:
>         return []
>     filtered_df = data[
>         (data['name'].str.contains(search_value, case=False, na=False)) |
>         (data[id'].astype(str).str.contains(search_value, case=False, na=False))
>     ]
> 
>     if filtered_df.empty:
>         return []
> 
>     # Format the dropdown options
>     options = [
>         {'label': f"{row['name']} - {row['name']} (ID: {row['id']})", 'value': row['id']}
>         for index, row in data.iterrows()
>     ]
> 
>     return options
> 
> @callback(Output('url', 'pathname'),
>               [Input('dropdown-results', 'value')])
> def display_page(selected_value):
>     if selected_value:
>         str_id= str(selected_value)
>         print(str_id)
>         return f"/detail/{str_id}"

The issue is that sometimes the URL changes as expected, but other times it doesn’t, showing inconsistency. Although I can see that str_id is printed always, the URL isn’t always updated or redirected to the new page.

Do you have any pointers on how to debug this inconsistency?

Thanks!

2

Thank you for the question, @Priyanka_Subramani .

@AnnMarieW has several good examples of multipage Dash apps. Maybe those can help.

Regarding your question, are you able to share a minimal reproducible example with us so that we can run it locally and reproduce the error you’re getting?

3

Thank you for pointing to the examples: I got a very good idea from dash-multi-page-app-demos/multi_page_update_url_in_callback_V292/pages/home.py at main · AnnMarieW/dash-multi-page-app-demos · GitHub and fixed my issue(issue was we needed to keep dcc.Location in the main app.py instead of pages and use callback-nav as refresh! for it to work consistently )

But may be a suggestion, if we can add an example with dropdown value selection redirecting to another page in the above repo, it would be great!

Thanks!