title: Nested routes in React Router v4 not rendering as expected
body: <p>I've spent the last few days trying to get my nested routes to work, and I have to say that I'm completely lost. </p>
  
  <p>I'm trying to get the following functionality to work:</p>
  
  <ol>
  <li>Sidebar with several links. One of them leads to /banking.</li>
  <li>/banking by default renders component <code>{ BankingCards }</code> inside a <code>{ CardWrapper }</code>.</li>
  <li>When user clicks on the <code>&lt;Link&gt;</code> of one of the 4 cards rendered by <code>{ BankingCards }</code>, I want to render the nested path inside of the same <code>{ CardWrapper }</code>.</li>
  </ol>
  
  <p>In the code block below, you will notice I tried using a switch statement to dynamically assign a component to <code>actionComponent</code>. This seems to break the functionality in more ways than one.</p>
  
  <p>Is it the approach that is wrong, or am I missing something about React Router components?</p>
  
  <pre><code>// Banking.js
  
  import CardWrapper from '../../Wrappers/CardWrapper/CardWrapper';
  import BankingCards from './BankingCards/BankingCards';
  import AddBank from './AddBank/AddBank';
  import AddDebit from './AddDebit/AddDebit';
  import AddCredit from './AddCredit/AddCredit';
  import AddDirect from './AddDirect/AddDirect';
  
  class Banking extends Component {
    state = {};
  
    render() {
      const { match } = this.props;
      console.log(match.params);
      // let actionComponent;
      // switch (match.params.actionType) { 
      //   case 'add-bank':
      //   actionComponent = AddBank;
      //     break;
      //   case 'add-debit':
      //   actionComponent = AddDebit;
      //     break;
      //   case 'add-credit':
      //   actionComponent = AddCredit;
      //     break;
      //   case 'add-direct':
      //   actionComponent = AddDirect;
      //     break;
      //   default:
      //     return null;
      // }
      return (
        &lt;div className={classes.Banking}&gt;
          &lt;h1 className={classes.mainHeader}&gt;Banking&lt;/h1&gt;
          &lt;CardWrapper&gt;
            &lt;Switch&gt;
              &lt;Route exact path={`${match.path}`} component={BankingCards} /&gt;
              &lt;Route path={`${match.path}/:actionType`} component={actionComponent} /&gt; 
            &lt;/Switch&gt;
          &lt;/CardWrapper&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>// BankingCards.js
  
  const bankingCards = ({ match }) =&gt; {
  
    return (
      &lt;&gt;
        &lt;Card&gt;
          &lt;h1&gt;Add Bank Account&lt;/h1&gt;
          &lt;Link to={`${match.url}/add-bank`}&gt;
            &lt;SVG src={iconPlus} className={classes.iconPlus} /&gt;
          &lt;/Link&gt;
          &lt;h3&gt;Manage accounts&lt;/h3&gt;
        &lt;/Card&gt;
  
        &lt;Card&gt;
          &lt;h1&gt;Add Debit Card&lt;/h1&gt;
          &lt;Link to={`${match.url}/add-debit`}&gt;
            &lt;SVG src={iconPlus} className={classes.iconPlus} /&gt;
          &lt;/Link&gt;
          &lt;h3&gt;Manage debit cards&lt;/h3&gt;
        &lt;/Card&gt;
  
        &lt;Card&gt;
          &lt;h1&gt;Add Credit Card&lt;/h1&gt;
          &lt;Link to={`${match.url}/add-credit`}&gt;
            &lt;SVG src={iconPlus} className={classes.iconPlus} /&gt;
          &lt;/Link&gt;
          &lt;h3&gt;Manage credit cards&lt;/h3&gt;
        &lt;/Card&gt;
  
        &lt;Card&gt;
          &lt;h1&gt;Add Direct Debit&lt;/h1&gt;
          &lt;Link to={`${match.url}/add-direct`}&gt;
            &lt;SVG src={iconPlus} className={classes.iconPlus} /&gt;
          &lt;/Link&gt;
          &lt;h3&gt;Manage direct debits&lt;/h3&gt;
        &lt;/Card&gt;
      &lt;/&gt;
    ); 
  };
  </code></pre>