Redirection in Plotly Dash Application Redirection in Plotly Dash Application flask flask

Redirection in Plotly Dash Application


This seems like something that shouldn't work, yet it does:

First add a hidden div for the output of your callback:

html.Div(id="hidden_div_for_redirect_callback")

Then define your callback like this (sidenote: I am using flask_login):

# Note that I am currently at /login@app.callback(Output("hidden_div_for_redirect_callback", "children"),              [Input("login_button", "n_clicks")],              [State('username_login', 'value'),               State('pwsd_login', 'value'),])def login_user_(n_clicks, uname, pswd):    # User clicked the login button    # Do login logic....    if successful_login:        return dcc.Location(pathname="/home", id="someid_doesnt_matter")    else:        # e.g. password doesn't match        raise PreventUpdate()

The returned dcc.Location will sadly force the page to reload (with any related side-effects) but you will end up in the path you want. If the login fails, you just prevent the update.


I made a pull request with a possibility to return Flask Response, but have no time to finalize it. If you need to implement it before I cover this PR with tests, you may extend the base application with this changes and use it like following:

@app.callback(...)def login():    if username:            redirect_home = redirect('/home')        response = app.make_response(redirect_home)        return response    else:        return 'No luck'

Another hack way is to return a javascript piece inside a tag that changes window.location property.