title: Changing components in a view in react
body: <p>I'm having a hard time understanding how Routes work in React. Right now I have my App.js with my routes for different pages like</p>
  
  <pre><code>&lt;Router&gt;
    &lt;Switch&gt;
      &lt;Route path="/" component={Index} /&gt;
      &lt;Route path="/create" component={Create} /&gt;
      &lt;Route path="/view/:id" component={View} /&gt;
      &lt;Route path="/edit/:id" component={Edit} /&gt;
    &lt;/Switch&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>All the routes work fine on this. My view page layout looks something like this.</p>
  
  <pre><code>--------------------------------------------------------------------------------------------
  NAVIGATION | HOME | ABOUT 
  --------------------------------------------------------------------------------------------
  |Side bar    |
  |            |
  |Option 1    |             Content that changes based on sidebar option
  |Option 2    |
  |            |
  </code></pre>
  
  <p>Here the navigation bar and the side bar will always remain the same but the content changes based on the option selected in the sidebar. To do so I made my view like</p>
  
  <pre><code>&lt;Container&gt;
    &lt;Row&gt;
      &lt;Col&gt;
         &lt;Sidebar /&gt;
      &lt;/Col&gt;
      &lt;Col&gt;
         &lt;Router&gt;
            &lt;Switch&gt;
              &lt;Route path="/option1" component={Option1} /&gt;
              &lt;Route path="/option2" component={Option2} /&gt;
            &lt;/Switch&gt;
         &lt;Router&gt;
      &lt;/Col&gt;
    &lt;/Row&gt;
  &lt;/Container&gt;
  </code></pre>
  
  <p>I assumed this would replace the content section with the Option components but it doesn't seem to work like that. Is there something I'm missing? I did try adding the routes to App.js which works fine but it won't load the <code>&lt;Sidebar /&gt;</code> component. I guess I could load the sidebar in each view but that defeats the purpose of React. I'm very to new to React so any help is appreciated.</p>