Mulitple Pages - problem with the example on https://dash.plotly.com/urls

Dash Python
1

Hi all,

I have try the example “Structuring a Multi-Page App” on this Page because I like a Structure :-).
I have structured the following Files:
app.py
callbacks.py
index.py
layouts.py
/apps/app1.py
/apps/app2.py

When I start “index.py” and open “127.0.0.1:8050” I get only a 404!

What is the Problem here?

BR
Torsten

2

Hi @Torsten,

Could you share with us your index.py file, especially the callback having as input dcc.Location?

3

Here the index.py:


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

from app import app
from apps import app1, app2


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


@app.callback(Output('page-content', 'children'),
              Input('url', 'pathname'))
def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
    elif pathname == '/apps/app2':
        return app2.layout
    else:
        return '404'

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

Ok. When you open 127.0.0.1:8050, the pathname is “/”, which is not handled in any of if statements, therefore it returns 404.

Without any changes in the app, you should be able to open 127.0.0.1:8050/apps/app1 for example. This is handled in the callback.

Usually it is a good idea to have an index page layout with links to the different apps with pathname == "/".

5

Ok, it works :slight_smile:
I will insert an index-page as Start-Page.

Thank’s a lot