Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Click on html.A causes Dash App to refresh?

In short: Does a click on a html.A-Element (in the app) cause the app to refresh? In my scenario it seems like it.

Unfortunately, I cannot share any code for the moment so I am trying to ask the question as simple as possible.

My scenario:
I have a multipage with two pages and a Navbar.

On Page 1, I load a file and Page 2 I visualizes it, if the file is loaded (simplified version)

On the Navbar, I have a textbox with an html.A-Element that links to Page 2. However, when I click it, the app seems to refresh (i.e. Page 2 does not show the visualization, as the file is not loaded anymore due to the refresh).

Is this expected behavior? How can I change this?
I hope this can be answered without a minimal working example. If not, I willy try to create one.

You should use dash_core_components.Link alongside dash_core_components.Location instead of html.A. See the docs here

Some background: normally when you navigate to a new page in your browser, it reloads all the page’s assets such as javascript bundles etc. including the code running the Dash front-end. This means your running app is interrupted. To enable navigation within your app while maintaining state and not requiring a page reload Dash follows the single page app pattern, where navigation between pages is simulated by updating the URL in the address bar and rewriting the contents of the page without actually navigating away and having to reload anything.

Note that if you’re using dash-bootstrap-components you can use e.g. dash_bootstrap_components.NavLink etc. as drop-in replacements for dash_core_components.Link.

2 Likes

that solved it. Thanks!

1 Like