Is there a simple way to redirect the user to another page in a multi-page app?

Let’s say you want to redirect the user to the bar-charts page if the user chooses “Percentage” from the dcc.RadioItem component below. Is there a simple way to redirect the user to that page in a multi-page app?

dcc.RadioItems(
    id='units_radio',
    options=[
        
        {'label': 'Micrograms', 'value': 'Micrograms'},
        {'label': 'Milligrams', 'value': 'Milligrams'},
        {'label': 'Grams', 'value':  'Grams'},
        {'label': 'Percentage', 'value': 'Percentage'},
        {'label': 'Calories', 'value': 'Calories'},
        ],
        value='Milligrams'
        ),

Hi @robertpfaff

If you are using dcc.Location to redirect to the different page, then:

@app.callback(Output('url_name', 'pathname'),
              [Input('units_radio', 'value')])
defradio_options(value):
    if value == 'Percentage':
        return '/barchartpage'
   elif value == all the options of the RadioItems:
       return each option

If the other options do not need to redirect to other pages then you need more than one “Output” and manage to return the Outputs different for each option selected.

1 Like

Hi @robertpfaff and @Eduardo
There is also the option to have the callback output with the tab value
Retaking Eduardo’s example:

@app.callback(Output(‘tabs’, ‘value’),
[Input(‘units_radio’, ‘value’)])
defradio_options(value):
if value == ‘Percentage’:
return ''put tab value corresponding to the page here"
elif value == all the options of the RadioItems:
return each option

You can define tab value like this
dcc.Tab(
label=“blabla”,
value=“blabla”,

)

1 Like