How to make a tab in dash have a different URL?

Question

I am working with the DASH library, and my app now has multiple tabs, but I need to make each tab have a different URL, has anyone accomplish that?

Answer 1

If you want to change the URL shown in the address bar when a new tab is selected, you can add a dcc.Location component and use dcc.Link components to select your tabs. Your dcc.Location component is the input for your tab change.

The example in the official docs does this:

• https://dash.plot.ly/urls

Answer 2

As suggested by @papalagi here, the only method that worked for me is to use two dcc.Location components (one that works as "input" url and one as "output" url) and write two callbacks:

• One that is fired when the url (dcc.Location) is changed and updates the selected tab (dcc.Tabs)
• Another one that is fired when the selected tab changes (dcc.Tabs) and updates the displayed url (dcc.Location)

Since this scenario implies a circular dependency, it explains the need two dcc.Location objects.

Looking at code, I implemented a solution where each tab has its own hash within the same page but this approach could be changed to update whole paths instead of hashes.

Firstly, in the layout of the app I include two dcc.Location components.

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

Then, I write the callbacks:

@app.callback(
    inputs=[Input('url', 'hash')],
    output=Output('main-tabs', 'value'))
def update_tab(hashh):
    print('>>> UPDATE TAB', hashh)
    return hash_tabs_value_dict.get(hashh.lstrip('#'), 'tab-1')


@app.callback(
    inputs=[Input('main-tabs', 'value')],
    output=Output('url-output', 'hash'))
def update_tab_hash(tab_value):
    print('>>> UPDATE HASH', tab_value)
    return '#' + tabs_value_hash_dict.get(tab_value, '')

P.S. In hash_tabs_value_dict and tabs_value_hash_dict I have a couple of dictionaries that store the mapping between the tabs values ('tab-1', 'tab-2', ...) and the desired values that I want to show.