reactjs - React router - Nested routes not working -

my goal have http://mydomain/route1 render react component component1 , http://mydomain/route2 render component2. so, thought it's natural write routes following:

    <route name="route1" handler={component1}>         <route name="route2" handler={component2} />     </route>      <defaultroute name="home" handler={home} />   </route> 

http://mydomain/route1 works expected http://mydomain/route2 renders component1 instead.

then read this question , changed routes follows:

    <route name="route1" path="route1" handler={component1} />     <route name="route2" path="route1/route2" handler={component2} />      <defaultroute name="home" handler={home} />   </route> 

both http://mydomain/route2 , http://mydomain/route2 work expected now. however, don't understand why former 1 not work while looks more logical , neater me.

the nested syntax works "/" , "route1" why not "route1" , "route2"?

the problem in nested routes, router try mount components match hierarchy. best used when want nest components inside each other... if want 2 separate routes match different components, need own routes.

<route handler={app}>   <route path="route1" handler={component1} />   <route path="/route1/route2" handler={component2} />   <defaultroute name="home" handler={home} /> </route> 

component2 mount (inside of app) when url /route1/route2.

if wanted nest components, need add <routehandler/> component1 render component2 inside of it.

the reason works because nesting components not same nesting urls , can handled separately router. want components nest not urls, , vice versa.