Multipage app doesn't work when I combine specific two app pages

Dash Python
1

This my multipage app structure

  • app.py
  • index.py
  • apps
    |-- init.py
    |-- app1.py
    |-- app2.py
    |-- app3.py

The page is blank when I run app 2 and 3 together. It works just fine when I run the apps individually or when I run app 1 and 2 together and app 2 and 3 together. Please help me identify the reasons for this? What could be the possible causes.

index.py

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

# Connect to main app.py file
from app import app
from app import server
# Connect to your app pages
from apps import app1 , app2,  app3


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div([
        dcc.Link('App 1|', href='/apps/app1'),
        dcc.Link('App 2 |', href='/apps/app2'),
        dcc.Link(' App 3', href='/apps/app3'),
    ], className="row"),
    html.Div(id='page-content', children=[])
])


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
     if pathname == '/apps/app2':
         return app2.layout
    if pathname == '/apps/app3':
        return app3.layout
    
    else:
        return "404 Page Error! Please choose a link"


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

Hi @divyar2630 and welcome to the Dash community :slight_smile:

This looks like the same issue as in this post: Blank page displayed after importing a dash app into the main file index.py but app displaying just fine if imported on its own - #3 by cl_frp

One thing to check is that all the ids are unique in the multipage app

1 Like