Dash app freezes when navigating to another page

Dash Python
1

hello everyone , I am using dash 2.6.1 and the new feature dash pages , but I encountered such a problem with frequent transition between pages, an incomprehensible thing happens, dash does not go to another page on the first try and freezes, and at some points it freezes very hard. Has anyone encountered this problem or can help me? I’ve been hung up on this error for a few days now, maybe it’s a library bug? here is a link to a short code where you can feel this pain for yourself GitHub - sohibjon07012001/Dash_Pages

2

HI @Sohibjon

Thanks for posting a MWE - it certainly helps understand the issue.

I expect the problem is here – the two dcc.Location components set with refresh=True

There is a conflict when you try to navigate to a new page while the browser it updating the current page twice.

Can you say more about why you are doing this? If it’s to update the page, it might be better to update the content in a callback with a dcc.Interval component, rather than refreshing the page with the browser.

3

dcc.Location(id=“url”, refresh=True)
needed to redirect to the other side

I implemented the redirect in the following way

@callback(
    Output("url", "href"),
    Input('project_button', 'n_clicks'),
)
def redirect_to_new_page(n):
    url ="/dashboard/projects/new"
    if n>0:
        return  url 
    else:
        raise PreventUpdate

if there is a better way to do a redirect, I’ll be happy to apply it

4

Hi @Sohibjon,

Yes, there is a better way to do the redirect. When you are using Dash Pages there is a built-in callback that does the routing. All you need to do is use a component that updates the href - then no additional callback is required.

Try removing all your dcc.Location components in your project - (I found at least 3), and remove the callback above. Then make your button:

dbc.Button("New Projects", id="project_button", href="/dashboard/projects/new")

This will now redirect to the new page automatically whenever the button is clicked.

There are rare cases when it’s necessary to update the url in a callback - for example, if you want to redirect to a new page when the user clicks on a figure. In this case, it’s necessary to use a callback to update the href. The important thing is that the dcc.Location is defined in the main app.py file so that it’s accessible to all pages of your app. You can find an example of this here and many more in: