dcc.Location and navigating without full page reload

Dash Python
1

I’m using a callback to update a location component, and wanting to navigate in an ‘SPA’ way, without a full page reload.

dcc.Location(id='app-location', refresh='callback-nav')
(I have also tried =True, or =False)

I’ve tried reading the docs (Location | Dash for Python Documentation | Plotly) however it’s a tad confusing, how exactly it’s meant to function, and how I’m meant to use it.

Thanks for any help!

Inci

2

Hi @Inci

What version of dash are you using? This requires dash>=2.9.0:

dcc.Location(id='app-location', refresh='callback-nav')

If you are on the most current version and it’s not working, could you post a minimal example that replicates the issue?

3

Oh. That’s awkward, I didn’t realise it was 2.9+, or realise 2.9 was even out yet.

Thanks for pointing that out, 2.9 also seems to have a whole raft of awesome features added too.

Thanks for that!

4

here is the minimal code how to redirect the user if , but can’t do it without refreshing the page

import dash 
from dash import  html, Input , Output, dcc 
import dash_bootstrap_components as dbc


app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(id="hidden_layout_for_redirect"),
    dbc.Button("Apply",id="button")
])

@app.callback(
    Output("hidden_layout_for_redirect", "children"),
    Input("button", "n_clicks")
)
def test(n_click):
    if dash.ctx.triggered_id =="button":
        return dcc.Location(id="someid", href="/dashboard", refresh="callback-nav")
    else:
        raise dash.exceptions.PreventUpdate
    


if __name__ == "__main__":
    app.run_server(debug=True)
5

@Sohibjon

The dcc.Location must be in the layout. And if it’s a multi-page app, it needs to be in the main app.py

Try it like this:


import dash
from dash import html, Input, Output, dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Location(id="url",  refresh="callback-nav"),
    html.Div(id="hidden_layout_for_redirect"),
    dbc.Button("Apply", id="button")
])


@app.callback(
    Output("url", "href"),
    Input("button", "n_clicks")
)
def test(n_click):
    if dash.ctx.triggered_id == "button":
        return "/dashboard"
    else:
        raise dash.exceptions.PreventUpdate


if __name__ == "__main__":
    app.run_server(debug=True)
6

Hi @Inci - not awkward :slightly_smiling_face: 2.9.0 was released very recently and the announcement is coming soon.

I think this will be one of my favorite new releases - there are tonnes of amazing new features in 2.9 :tada: