title: React Route without Refreshing the Page
body: <p>I have below structure for React</p>
  
  <pre><code>App.js 
  -&gt; 
      Skeleton.js 
      -&gt;
          1) Sidebar.js
          2) Content.js
          -&gt; 
              1) Page1.js
              2) Page2.js
              3) Page3.js
  </code></pre>
  
  <p>Routing is done inside App.js with below:</p>
  
  <pre><code>&lt;BrowserRouter&gt;
        &lt;Fragment&gt;
        &lt;Route exact path="/" component={Skeleton} /&gt;  
        &lt;Route path="/:type" component={Skeleton} /&gt;
      &lt;/Fragment&gt;
    &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>And I have sidebar items like this</p>
  
  <pre><code>&lt;ListItem
    button
    className={classes.nested}
    component="a" href="/Equity-Runs"
  &gt;
    &lt;ListItemIcon&gt;
      &lt;DescriptionIcon /&gt;
    &lt;/ListItemIcon&gt;
    &lt;ListItemText
      className={classes.child}
      inset
      primary="Page1"
    /&gt;
  &lt;/ListItem&gt;
  </code></pre>
  
  <p>Everything works as expected like, if you click Page1 in the Sidebar it loads Page1, if you click Page2 loads Page 2, etc...</p>
  
  <p>Now, each time you click on a link inside Sidebar, page goes blank white then loads. I'd like to make it so when you click pages only Content.js reloads therefore, rest of the page does not go blank and get loaded. Each time you click on a Page from sidebar, only Content area would change.</p>
  
  <p>I am guessing I would have to move Routing logic into Content file but then problem is I need to know which page the user is on within Sidebar and AppBarPanel files. I don't have Redux set up as of now and would like to not implement that for this question's sake. </p>
  
  <p>Note: I really don't understand why would anyone give negative point to this question without saying what's wrong with it. </p>