title: Route in Dash without creating inefficient, hidden items
body: <p>I am inheriting a plotly Dash app which currently has an <code>app.layout</code> as follows:</p>
  <pre class="lang-py prettyprint-override"><code>def serve_layout():
      return html.Div(
          className=&quot;app&quot;,
          children=[
              dcc.Location(id=&quot;url&quot;, refresh=False),
              build_navbar(),
              html.Div(
                  id=&quot;app-container&quot;,
                  className=&quot;main-content&quot;,
                  children=[
                      dcc.Store(id=&quot;usecase-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.use_case_library),
                      dcc.Store(id=&quot;gen-config-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.gen_config),
                      dcc.Store(id=&quot;control-config-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.control_config),
                      dcc.Store(id=&quot;data-config-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.data_config),
                      dcc.Store(id=&quot;data-store&quot;, storage_type=&quot;session&quot;),
                      dcc.Store(id=&quot;liveplot-store&quot;, storage_type=&quot;session&quot;),
                      build_settings_tab(),
                      build_simulation_tab(),
                      build_network_tab(),
                      dcc.Interval(id='graph-update', interval=1000, max_intervals=1000, n_intervals=0,
                                      disabled=True)
                  ],
              ),
          ],
      )
  </code></pre>
  <p>where there are 3 separate routes for each of the <code>build_*</code> functions; with a callback setting <code>{display: none}</code> on the <code>div</code>s returned by the non-selected functions. I propose the following code:</p>
  <pre class="lang-py prettyprint-override"><code>def serve_layout():
      return html.Div(
          className=&quot;app&quot;,
          children=[
              dcc.Location(id=&quot;url&quot;, refresh=False),
              build_navbar(),
              html.Div(
                  id=&quot;app-container&quot;,
                  className=&quot;main-content&quot;,
                  children=[
                      dcc.Store(id=&quot;usecase-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.use_case_library),
                      dcc.Store(id=&quot;gen-config-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.gen_config),
                      dcc.Store(id=&quot;control-config-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.control_config),
                      dcc.Store(id=&quot;data-config-store&quot;, storage_type=&quot;session&quot;, data=LiveGraph.data_config),
                      dcc.Store(id=&quot;data-store&quot;, storage_type=&quot;session&quot;),
                      dcc.Store(id=&quot;liveplot-store&quot;, storage_type=&quot;session&quot;),
                      dcc.Interval(id='graph-update', interval=1000, max_intervals=1000, n_intervals=0,
                                      disabled=True),
                      html.Div(id=&quot;main-content&quot;)
                  ],
              ),
          ],
      )
  
  @app.callback(Output(&quot;main-content&quot;, &quot;children&quot;), [Input(&quot;url&quot;, &quot;pathname&quot;)])
  def route(path):
      if path == &quot;/&quot;:
          return build_settings_tab()
      # ...only return the individual function necessary for the path
  </code></pre>
  <p>Note that I have removed the three function calls from <code>serve_layout()</code> and added a <code>div#main-content</code>. The issue I'm running into is that I have callbacks set up to watch various inputs across the three pages, so I get an <code>Error loading dependencies</code> if I try to use the second code block. Is there a way around this, or do I really have to put <em>everything</em> in <code>app.layout</code> that I want to access later on? This would be really inefficient, as one of my pages creates charts and I don't want to render the charts and then set <code>{display: none}</code>, seems backwards and certainly sets off a lot of warning bells in my head... Are there any other solutions?</p>