title: React Router V4 - Route between components and not entire page
body: <p>I'm learning React with React Router V4. I have an image here that might explain what I would like to do:</p>
  
  <ol>
  <li>Click "Next" button</li>
  <li>Send click Event to Component A ("button got clicked")</li>
  <li>Clicking "Next" would  also swap "Component B" with "Component C" while keeping everything the same on the page. </li>
  <li>Be able to navigate to a completely different page with different components after all this.</li>
  </ol>
  
  <p>I'm having a really hard time figuring out the routing and structure to be able to handle this.</p>
  
  <p>Thanks for the help.</p>
  
  <p>Does what I'm trying to accomplish here is normal or is this weird and not recommended?</p>
  
  <p><a href="https://i.stack.imgur.com/NWiu8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NWiu8.jpg" alt="enter image description here"></a></p>
  
  <p><em>What I tried:</em></p>
  
  <ol>
  <li><p>I tried leaving Component A Inside the router on top of everything - this works until you go to page 3 because then I can't remove it.</p></li>
  <li><p>I've been trying to implement something similar to React Router v4 example on sub-topics. Basically creating a parent component that holds Component A and underneath it have two <code>&lt; Match /&gt;</code>, one for Component B and another for Component C. This hasn't worked either and I'm probably doing something very wrong here.
  <a href="https://react-router.now.sh/basic" rel="nofollow noreferrer">https://react-router.now.sh/basic</a></p></li>
  <li><p>I've also been poking around reading many tutorials but they're all different versions of React and React Router. I thought this was simple but been banging my head for a week now without any progress. </p></li>
  </ol>