title: React Router renders two components instead of one
body: <p>I am trying to render two different components with the path <code>/acts</code> and <code>/acts/lite</code>. The problem is that when I go to <code>/acts/lite</code> I get both components rendered instead of just the one that correspond to this path...</p>
  
  <p>For example, when I'm navigating to <code>/acts</code> I get this:<br>
  <a href="https://i.stack.imgur.com/cVqFp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cVqFp.png" alt="enter image description here"></a></p>
  
  <p>And when I'm navigating to <code>/acts/lite</code> the text <code>Test Acts</code> is still there...
  <a href="https://i.stack.imgur.com/heUZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/heUZw.png" alt="enter image description here"></a></p>
  
  <p>This is my <code>Router</code>:</p>
  
  <pre><code>  &lt;Router&gt;
      &lt;div&gt;
        &lt;App&gt;
          &lt;Route exact path="/login" component={LoginPage}/&gt;
          &lt;div className="flexible-width container"&gt;
            &lt;Route path="/acts" component={requireAuth(ActsPage)} /&gt;
            &lt;Route path="/acts/lite/" component={requireAuth(ActsLitePage)} /&gt;
          &lt;/div&gt;
        &lt;/App&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  </code></pre>
  
  <p><code>ActsPage</code> Component:</p>
  
  <pre><code>class ActsPage extends React.Component {
  
    render() {
      return (
        &lt;div&gt;
          Test Acts
        &lt;/div&gt;
      );
    }
  }
  
  export default ActsPage;
  </code></pre>
  
  <p><code>ActsLitePage</code> Component:</p>
  
  <pre><code>class ActsLitePage extends React.Component {
  
    render() {
      return (
        &lt;div&gt;
          Testing Acts Lite
        &lt;/div&gt;
      );
    }
  }
  
  export default ActsLitePage;
  </code></pre>
  
  <p>And this is the Component that shows the sidebar with those two links:</p>
  
  <pre><code>var Sidebar = React.createClass({
    render() {
      var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
      return (
        &lt;div className={sidebarClass}&gt;
          &lt;div&gt;&lt;Link to="/acts/"&gt;Acts&lt;/Link&gt;&lt;/div&gt;
          &lt;div&gt;&lt;Link to="/acts/lite/"&gt;Acts Lite&lt;/Link&gt;&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  export default Sidebar;
  </code></pre>
  
  <p>I really don't know what I'm doing wrong or why it behaves like this..</p>