Dash Error: "A Nonexistent Object Was Used in an Output of a Dash Callback" After Navigating Between Pages

Question

am developing a Dash web application with a sidebar containing buttons that toggle different views (tables and analysis views). The app has multiple pages, including /analysis (where data is analyzed and displayed), /documentation, and /home.

The issue arises after analyzing data under /analysis, interacting with buttons, then navigating to another page (like /documentation), and clicking the same buttons again. At that point, I get the following error:

A nonexistent object was used in an `Output` of a Dash callback. The id of this object is `table-view` and the property is `style`.

What I Want to Achieve: Ensure that clicking the sidebar buttons under /analysis correctly displays the relevant views. Allow navigation between pages without triggering errors when interacting with sidebar buttons. Avoid errors when clicking buttons under a route like /documentation after having previously analyzed data under /analysis. What I Have Tried: Ensuring table-view is always in the layout:

I added html.Div(id="table-view", style={"display": "none"}) to the main layout to ensure the element always exists. This removed the error when the app first loads but did not resolve it after navigating between pages. Using suppress_callback_exceptions=True:

This prevents crashes but does not solve the root problem. Checking callback logic:

My callback for switching views (triggered by sidebar buttons) ensures table-view is only shown when needed. However, when navigating to another page (e.g., /documentation) and clicking a sidebar button, Dash still tries to update table-view, which does not exist on that page.

   import dash
from dash import html, dcc
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True)

# Simulated Data Store
app.layout = html.Div([
    dcc.Location(id="url", refresh=False),
    dcc.Store(id="store-pd_gv"),  # Data store
    
    # Sidebar
    html.Div([
        html.Button("Table View", id="table-view-button"),
        html.Button("HDMS View", id="odis-marko-view-button"),
    ], className="sidebar"),

    # Main Content
    html.Div(id="page-content"),
])

# Dummy Table View Function
def create_table_view(data):
    return html.Div(f"Table Data: {data}")

# Page Routing Callback
@app.callback(
    Output("page-content", "children"),
    Input("url", "pathname"),
)
def display_page(pathname):
    if pathname == "/":
        return html.Div("Home Page")
    elif pathname == "/analysis":
        return html.Div([
            html.Button("Analyze", id="analyze-button"),
            html.Div(id="table-view", style={"display": "none"}),
            html.Div(id="hdms-view", style={"display": "none"}),
        ])
    elif pathname == "/documentation":
        return html.Div("Documentation Page")
    return html.Div("404: Page Not Found")

# Simulated Analysis Callback (Stores Data)
@app.callback(
    Output("store-pd_gv", "data"),
    Output("url", "pathname"),
    Input("analyze-button", "n_clicks"),
    prevent_initial_call=True
)
def analyze_data(n_clicks):
    return [{"id": 1, "value": "Test Data"}], "/analysis"

# The Problematic Callback
@app.callback(
    [
        Output("table-view", "style"),
        Output("hdms-view", "style"),
        Output("table-view", "children"),
        Output("hdms-view", "children"),
    ],
    [
        Input("table-view-button", "n_clicks"),
        Input("odis-marko-view-button", "n_clicks"),
    ],
    [
        State("store-pd_gv", "data"),
        State("url", "pathname"),
    ],
    prevent_initial_call=True,
)
def switch_views(table_n_clicks, odis_n_clicks, pd_gv_data, pathname):
    if pathname != "/analysis":
        return {"display": "none"}, {"display": "none"}, dash.no_update, dash.no_update

    if not pd_gv_data:
        return {"display": "none"}, {"display": "none"}, dash.no_update, dash.no_update

    return {"display": "block"}, {"display": "none"}, create_table_view(pd_gv_data), html.Div()

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

Question: How can I ensure that clicking sidebar buttons only updates components that exist on the current page and does not trigger errors when navigating between routes?

Is there a better way to structure the layout or callbacks to prevent Dash from attempting to update non-existent components?