Routing issues with dash integration with Flask

I initially built a dash app that I am trying to run in a Flask environment. I required user authentication and therefore integrated dash to flask application for flask-login component.

When I run the application, the login works fine, however, I am running into issues configuring routing for my multi-page dash application.

Here’s the app file structure:

  • auth

    • login
    • server
    • init.py

    templates

    • base.html
  • pages

    • home.py
    • page2.py
      index.py
      app.py

In index.py, the app layout is defined with page links. ‘Home’ is the default page when application loads.

import flask
from app import app
from auth.server import server


# App Layout
app.layout = html.Div([

        dcc.Link(
            'Home',
            href='/home'
        ),


        dcc.Link(
            'Archive',
            href='/archive'
        ),

        dcc.Location(id='url'),

        html.Div(id='page-content'),

       
])


# Render page content
@app.callback(Output("page-content", "children"),
              [
                Input('url', 'pathname')
              ]
             )
def display_content(pathname):

    if pathname == '/home':
        return home.layout

    elif pathname == '/archive':
        return archive.layout()

contents of app.py

app = dash.Dash(__name__,
                url_base_pathname='/home/',
                #routes_pathname_prefix='/dashboard/',
               )

contents of init.py

from .server import server
from index import app as dashApp

app = DispatcherMiddleware(server, {
                           '/dashboard': dashApp.server,
                           #add dash routes
})

How do I configure routing for the dash application? I am getting 404 Not Found error when I try to access the dash application. The user / authentication part works fine.