Plotly Dash - How to reroute back to homepage using dash-pages?

Viewed 21

I use dash-pages feature to build a multi-page app. The app is started via a file called app.py. I test my app in localhost. Upon loading the webpage, the app will load the homepage just fine, card components showing numbers that have been calculated..., URL shown in address bar is http://127.0.0.1:8050/mydashboard/. From homepage, I navigate to page 3 and URL shown now is: http://127.0.0.1:8050/mydashboard/page3. So page3 loads just fine. Now here's the issue, from page 3 I click on the navItem "homepage", none of the card components gets updated. URL is showing: http://127.0.0.1:8050/mydashboard/ which is the SAME as how it was when the page initially loaded. Just empty cards, no numbers. No error messages in browser console. I suspect it's something to do with reroutes??? Could someone explain to me what's going on and how to solve this issue in plotly Dash? Help and clarity is much appreciated.

in app.py:

app = dash.Dash(
    __name__,
    use_pages=True,
    external_stylesheets=[dbc.themes.FLATLY],
    url_base_pathname='/mydashboard/',
    meta_tags=[{
        'name': 'viewport',
        'content': 'width=device-width, initial-scale=1.0'
    }],
    suppress_callback_exceptions=True
)

app.layout = html.Div([
              dbc.Navbar(
               [
                 dbc.NavItem([
                    dbc.NavLink(page["name"], href=(page["relative_path"]), style={'display':'inline-block'})
                    for page in dash.page_registry.values()
                    if page["module"] != "pages.not_found_404"
                 ]),
               ], className= 'sticky-top', color="primary", dark=True),
               
               dash.page_container
])


if __name__=='__main__':
    app.run_server(host='0.0.0.0', port=8060)

in pages/homepage.py

dash.register_page(
    __name__,
        path="/",
    name='homepage',
    description='My Homepage',
    order=0,
)

in page3.py

dash.register_page(
    __name__,
    path='/page3',
    name='page3',
    order=1
)
0 Answers
Related