Multi-page app with content switched by links

Dash Python
1

I am encountering several difficulties when trying to switch from a tab-based layout to a multi-page layout.

Where I previously had tabs with different aspects of the app, I now want to switch between these aspects using links, for example in the navigation bar. I want a link with id nav-link-1 to switch to the aspect main_1, nav-link-2 to switch to main_2 etc

I tried the following callback:

@app.callback(
    Output('main', 'children'),
    [
        Input('nav-link-1', 'n_clicks')
    ],
)
def switch_app_to_1(n_clicks):
        return [main_1]

  1. Now that the aspect is no longer in a tab but placed via this callback, all callback functionality inside of it is gone. None of the buttons and controls work anymore.

  2. How can I have a single callback for the Output('main', 'children') (as enforced by Dash) and have different links trigger it and switch accordingly?

2

You might find this page in the documentation helpful. In short use a combination of dcc.Location and dcc.Link along with a callback that monitors the url and populates the children of main accordingly.

1 Like
3

Thanks, this looks like the solution. Will try it out.

4

I was able to realize the layout I wanted with the help of these components.

Callback functionality disappearing was due to the order in which the callbacks were declared - apparently that can be a subtle source of bugs that do not throw exceptions.