title: A Tabs Component of React
body: <p>I had scanned the Tabs component of react-bootstrap, but it was not a good choice, it mounted all the tab once the Tabs Component did mounted. So I use the child route to make a Tabs Component.</p>
  
  <p>I have three tabs. For Example, tabA, tabB, tabC.</p>
  
  <p>Specially, tabA and tabB have the same UI, but they request the different API</p>
  
  <pre><code>&lt;Route path="tabs" getComponent={ProfitReports.flag.detail.default}&gt;
      &lt;Route path="tabA" getComponent={tabAorB}/&gt;
      &lt;Route path="tabB" getComponent={tabAorB}/&gt;
      &lt;Route path="tabC" getComponent={tabC}/&gt;
  &lt;/Route&gt;
  
  ....
  
  class Tabs extends React.Component {
      render() {
          return (
              &lt;Flex className="gm-tabs gm-paddingLR15"&gt;
                  &lt;IndexLink to="/tabs/tabA" className="tab" activeClassName="active"&gt;TabA&lt;/IndexLink&gt;
                  &lt;Link to="/tabs/tabB" className="tab" activeClassName="active"&gt;TabB&lt;/Link&gt;
                  &lt;Link to="/tabs/tabC" className="tab" activeClassName="active"&gt;TabC&lt;/Link&gt;
              &lt;/Flex&gt;
          );
      }
  }
  
  export default Tabs;
  </code></pre>
  
  <p>But it comes the problem.</p>
  
  <p><strong>When I Click the tabA link, it works, But when I Click the tabB link, that nothing happen except the url has changed. No request, no new component init</strong></p>
  
  <p>and I found the TabAorB component was not unmount, so I think maybe the problem was made here.</p>
  
  <h3>Requirement</h3>
  
  <p>I hope:</p>
  
  <p>where I click the tabA link, it request the API1, and request the API2 after click the tabB link</p>