Redirect with different Query Strings

Hi @FirstNumberTwo and welcome to the Dash community :slight_smile:

You should avoid using eval because it can introduce security risks. This could execute what someone typed in the URL

if eval(urllib.parse.parse_qs(urllib.parse.urlparse(search).query)['options'][0]):

For more information see:

Since you are using Pages, you can do the navigation without adding any dcc.Location components to your app.

To disable/enable buttons and to update the options of the RadioItems, you can use a dcc.Store component rather than the search prop of a dcc.Location

Then to navigate to the details page, you can update the href prop of the gotToFruitDetailButton. That way, when the button is clicked, then Pages will automatically navigate to that page automatically - you don’t have to write that callback.

So your callback might look something like:

@callback(   
   Output('goToFruitDetailsButton', 'href'),
   Input('showOptionsRadioItems', 'value'),   
)
def redirect_details(selected_fruit):
   return f'/details?fruit={selected_fruit}'

You can see some examples in this repo. I recommend cloning it and running some of the examples so you can see it working. Example 10 shows navigating to a new page and using the query strings to show different details on the page. Examples 15 and 16 show how to navigate by updating buttons or links in a callback.

2 Likes