Save parameter in url in Dash multi app

hi all, I would like to synchronize component values between pages and save parameters in url.
I try this example dash-multi-page-app-demos/multi_page_sync_components at main · AnnMarieW/dash-multi-page-app-demos · GitHub
and add the callbacks update url

from dash import dcc, html
from dash import Output, Input, State, callback
import urllib
import dash
import utils

dash.register_page(__name__, path="/")

layout = html.Div(
    [
        dcc.Location(id='url', refresh=False),
        html.Label("Page 1 Select Year"),
        utils.app_spanning_input,
        html.Div(id="page1-out"),
    ]
)

@callback(
    Output('all-pages-year', 'value'),
    Input("url", "href"),
    Input('all-pages-year', 'value'),
    
    )
def update_general_value(href,year):
    print('======================================update_general_value===========================================')
    o = list(urllib.parse.urlparse(href))
    q = dict(urllib.parse.parse_qsl(o[4]))
    pathname = o[2]
    if(q=={}):
        year = 'ATK'
    else:
        print('========',q)
        if(year==None):
            year = q['all-pages-year']
        
    return year
        
@callback(
    Output('url', 'href'),
    Input("all-pages-year", "value"),
    State('url', 'href'))

def update_pathname(year,href):
    print('======================================update_pathname===========================================')

    o = urllib.parse.urlparse(href)
    o = o._replace(path='/')
    q = dict(urllib.parse.parse_qsl(o.query))
    q['all-pages-year'] = year
    query_string = urllib.parse.urlencode(q)
    o = o._replace(query=query_string)
    href = o.geturl()
    print('href',href)
    return href

@callback(
    Output("page1-out", "children"),
    Input("all-pages-year", "value")
    )
def update(year):
    return f"The dropdown is {year}"

but the value of dropdown can’t share between pages . Are there any way to fix it. Thanks.

Hello @phuonghao145,

When you click on a link, it puts that href into the url, and destroys any search strings you may have added.

If you want to be able to click on a link and it go to include the search string, then you will also have to append the string to all the links href.

Then, in the layouts, you will also have to use the search strings inside the response.

1 Like

hi, do you have any specific examples? I can’t imagine how to do it. Thanks