Dash Pages - mix with old approach

Dash Python
1

Is it possible to mix Pages functionality and previous approach? New solution looks great, but next to main page with navigation bar and its children pages I also need to be able to display raw page without outer page.

Imagine having main page with navigation bar and header in which you have dash.page_container. In pages folder I would have different graphs, which would be displayed in main page inside dash.page_container. But I also want to be able to show graph form my pages folder in full window, without outer layout.
Is it possible? Is dcc.Location(id='url', refresh=False) still available to use alongside Pages?

2

Ok, I have tested it on “Example: Simple Multi-Page App with Pages” and at least I can share answer with you.

Yes, it is possible to use dcc.Location and callback to get custom ‘url’ which is not correlated with any page from pages folder. You need to add dcc.Location(id='url', refresh=False) in main layout, id to outer html.Div and callback from “url” to your outer container. Here is modified app.py script from example:

import dash
from dash import Dash, Input, Output, callback, dcc, html
from dash.exceptions import PreventUpdate

app = Dash(__name__, use_pages=True)

app.layout = html.Div([
	html.H1('Multi-page app with Dash Pages'),

    dcc.Location(id='url', refresh=False),

    html.Div(
        [
            html.Div(
                dcc.Link(
                    f"{page['name']} - {page['path']}", href=page["relative_path"]
                )
            )
            for page in dash.page_registry.values()
        ]
    ),

	dash.page_container
], id='page-container')


@callback(Output('page-container', 'children'),
         [Input('url', 'pathname')])
def custom_endpoint(pathname):
    if pathname and (pathname == '/custom'):
        return "Custom page"
    else:
        raise PreventUpdate


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

The only problem is that before my custom page I can see 404 error page for a brief time. Is there any way to avoid this or maybe other solution? Thanks!

3

Hi @lance

That’s an interesting workaround.

Pages has a default 404 page. You could make a custom one that’s just blank.

Try adding a file called not_found_404.py to the pages folder:

pages/not_found.404.py


import dash

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

layout = dash.html.Div("")
4

Yes it is possible, but still we will see header etc. I have opened issue with feature request on github.