title: React router - Nested routes not working
body: <p>My goal is to have <a href="http://mydomain/route1" rel="noreferrer">http://mydomain/route1</a> render React component Component1 and <a href="http://mydomain/route2" rel="noreferrer">http://mydomain/route2</a> render Component2. So, I thought it's natural to write the routes like the following:<br>
  </p>
  
  <pre><code>    &lt;Route name="route1" handler={Component1}&gt;
          &lt;Route name="route2" handler={Component2} /&gt;
      &lt;/Route&gt;
  
      &lt;DefaultRoute name="home" handler={Home} /&gt;
    &lt;/Route&gt;
  </code></pre>
  
  <p><a href="http://mydomain/route1" rel="noreferrer">http://mydomain/route1</a> works as expected but <a href="http://mydomain/route2" rel="noreferrer">http://mydomain/route2</a> renders Component1 instead.  </p>
  
  <p>Then I read <a href="https://stackoverflow.com/questions/27612765/nested-routes-in-react-router">this question</a> and changed the routes to as follows:  </p>
  
  <p></p>
  
  <pre><code>    &lt;Route name="route1" path="route1" handler={Component1} /&gt;
      &lt;Route name="route2" path="route1/route2" handler={Component2} /&gt;
  
      &lt;DefaultRoute name="home" handler={Home} /&gt;
    &lt;/Route&gt;
  </code></pre>
  
  <p>Both <a href="http://mydomain/route2" rel="noreferrer">http://mydomain/route2</a> and <a href="http://mydomain/route2" rel="noreferrer">http://mydomain/route2</a> work as expected now. However, I don't understand why the former one does not work while it looks more logical and neater to me.  </p>
  
  <p>The nested syntax works for "/" and "route1" so why not "route1" and "route2"?</p>