title: Sidebar Routing with state management and re-fetching
body: <p>I am having a hard time understanding how to route using a sidebar and conditionally reloading the state. what I mean is that I would like when a route in the sidebar is chosen, data for that route is loaded into the main container to the right of the sidebar.</p>
  <p>​</p>
  <p>When clicking on a couple routes, I would like the user to be able to go back to the previous route, without having to re-fetch the data. I know how to lift the state and that works for not re-fetching on page back. The issue is when the link is clicked again, purposefully, I WOULD like the data to be re-fetched but the old state is shown instead.</p>
  <p>​</p>
  <p>Approach 1 lifted state:</p>
  <ol>
  <li>Main container component is loaded, data for each route is manually
  fetched (inefficient but was testing)</li>
  <li>State is then passed to route in said component</li>
  <li>Can go back and forward without reloading.</li>
  <li>Clicking on &quot;Hone&quot; after being on &quot;Item&quot;, nothing is re-fetched, old
  data always displayed.</li>
  </ol>
  <p>​</p>
  <p>Approach 2 state in component:</p>
  <ol>
  <li>Routes are loaded on routing on when sidebar items are clicked.</li>
  <li>Fetch handled locally in component</li>
  <li>Going back or forward re-fetches</li>
  <li>Clicking on &quot;Hone&quot; after being on &quot;Item&quot;, will re-fetch the data as
  intended.</li>
  </ol>
  <p>​</p>
  <p>I have tried so many different ways, but I can only ever hold the state indefinitely or fetch on back each time. No hybrid fetching and state caching as I would like. Been at this for the last two days and I give up. The code is below with the component based local state/constant route re-fetching. Any help would be greatly appreciated.</p>
  <p>Main Container</p>
  <pre><code>import React from &quot;react&quot;;
  import SideBar from &quot;./Sidebar&quot;;
  import Header from &quot;./Header&quot;;
  import Routes from &quot;./Routes&quot;;
  
  function MainContainer() {
      return (
          &lt;&gt;
              &lt;div className=&quot;main-sidebar&quot;&gt;
                  &lt;SideBar /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;main-content&quot;&gt;
                  &lt;Header /&gt;
                  &lt;Routes /&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  }
  
  export default MainContainer;
  </code></pre>
  <p>Sidebar</p>
  <pre><code>import React from &quot;react&quot;;
  import { NavLink } from &quot;react-router-dom&quot;;
  import Nav from &quot;react-bootstrap/Nav&quot;;
  
  function SideBar({ onClick }) {
      const linkItems = [
          { name: &quot;Home&quot;, to: &quot;/&quot; },
          { name: &quot;Item&quot;, to: &quot;/item&quot; },
          { name: &quot;Dashboard&quot;, to: &quot;/dashboard&quot; },
      ];
  
      const sidebarItems = linkItems.map((item) =&gt; (
          &lt;Nav.Item key={item.to}&gt;
              &lt;NavLink exact to={item.to} activeClassName=&quot;sidebar-active-nav&quot; className=&quot;nav-link sidebar-inactive-nav&quot;&gt;
                  &lt;h3&gt;{item.name}&lt;/h3&gt;
              &lt;/NavLink&gt;
          &lt;/Nav.Item&gt;
      ));
  
      return &lt;Nav className=&quot;flex-column&quot;&gt;{sidebarItems}&lt;/Nav&gt;;
  }
  
  export default SideBar;
  </code></pre>
  <p>Routes</p>
  <pre><code>import React from &quot;react&quot;;
  import { Switch, Route } from &quot;react-router-dom&quot;;
  import Dashboard from &quot;./Dashboard&quot;;
  import Item from &quot;./Item&quot;;
  import Home from &quot;./Home&quot;;
  
  function Routes() {
      return (
          &lt;div className=&quot;container-fluid&quot;&gt;
              &lt;Switch&gt;
                  &lt;Route path=&quot;/&quot; exact render={(props) =&gt; &lt;Home key=&quot;1&quot; {...props} /&gt;} /&gt;
                  &lt;Route path=&quot;/item&quot; render={(props) =&gt; &lt;Item key=&quot;2&quot; {...props} /&gt;} /&gt;
                  &lt;Route path=&quot;/dashboard&quot; render={(props) =&gt; &lt;Dashboard key=&quot;3&quot; {...props} /&gt;} /&gt;
              &lt;/Switch&gt;
          &lt;/div&gt;
      );
  }
  
  export default Routes;
  </code></pre>
  <p>Example of a route component</p>
  <pre><code>import { useEffect } from &quot;react&quot;;
  import Component from &quot;react-bootstrap/Container&quot;;
  import Spinner from &quot;react-bootstrap/Spinner&quot;;
  import useFetch from &quot;../helpers/Fetcher&quot;;
  
  function Dashboard() {
      const [data, loading] = useFetch(&quot;https://raw.githubusercontent.com/epicmau5time/demo/master/test.json&quot;);
  
      useEffect(() =&gt; {
          return () =&gt; {
              console.log(&quot;cleaned up&quot;);
          };
      }, []);
  
      return (
          &lt;Component className=&quot;page-container&quot;&gt;
              &lt;h2&gt;Dashboard&lt;/h2&gt;
              {!loading &amp;&amp; data ? (
                  data.map((data) =&gt; (
                      &lt;div key={data.id}&gt;
                          &lt;p&gt;{data.title}&lt;/p&gt;
                      &lt;/div&gt;
                  ))
              ) : (
                  &lt;div className=&quot;justify-content-center text-center&quot;&gt;
                      &lt;Spinner className=&quot;&quot; animation=&quot;border&quot; variant=&quot;primary&quot; role=&quot;status&quot;&gt;
                          &lt;span className=&quot;sr-only&quot;&gt;Loading...&lt;/span&gt;
                      &lt;/Spinner&gt;
                  &lt;/div&gt;
              )}
          &lt;/Component&gt;
      );
  }
  
  export default Dashboard;
  </code></pre>
  <p>Fetching helper</p>