Single Page App ("SPA") URL / Multi Page Support - Proposal and Development Preview

Hello Dash Community!

I just published 2 new components under the pre-release channel that enable multi-page support.

• dash_core_components.Location component. Location represents the URL bar in the browser. The pathname property updates the pathname of the browser, refreshing the page if refresh=True.
• dash_core_components.Link component. Link is like html.A except that it updates the Location’s pathname directly, without refreshing the page (refresh=False). Like html.A, it takes href as a component. It doesn’t render any markup itself, it just adds an “click” handler to whatever children were passed into it.

With these two components, we can make single-page apps with multiple URLs in Dash. A “single-page app” means that the pages update without doing an entire page refresh.

Here is a really eximple example:

# pip install dash_core_components==0.5.3rc1

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

app.layout = html.Div([
    # This "header" will persist across pages
    html.H2('Multi Page Dash App'),

    # Each "page" will modify this element
    html.Div(id='content-container'),

    # This Location component represents the URL bar
    dcc.Location(id='url', refresh=False)
], className="container")

@app.callback(
    Output('content-container', 'children'),
    [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/':
        return html.Div([
            html.Div('You are on the index page.'),

            # the dcc.Link component updates the `Location` pathname
            # without refreshing the page
            dcc.Link(html.A('Go to page 2 without refreshing!'), href="/page-2"),
            html.Hr(),
            html.A('Go to page 2 but refresh the page', href="/page-2")
        ])
    elif pathname == '/page-2':
        return html.Div([
            html.H4('Welcome to Page 2'),
            dcc.Link(html.A('Go back home'), href="/"),
        ])
    else:
        return html.Div('I guess this is like a 404 - no content available')

app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

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

---

You can try this out with

$ pip install dash_core_components==0.5.3rc1

I’ll keep this in the prerelease channel for the next week or so before adding it to 0.5.3 and including it in the documentation.

I think this is a pretty good solution to handling multiple URLs for now.

Happy to field any feedback on this 😃

[chriddyp]

I have merged this into dash-core-components and updated dash-docs to use this pattern. A tutorial on this is now at https://plot.ly/dash/urls 😃

[ned2]

Ah, perhaps it’s as simple as adding app.config.supress_callback_exceptions=True to my aDash app? This seems to work now. Is there any potential gotchas of having callbacks applied to as of yet undefined elements aside from missing out on validation of IDs etc?