reactjs - React router and nested routes -

i confused how create following (really simple) route structure.

i have app has top-level route login component:

and top-level route app (let's call home component):

now, home component has header, sidebar, , main space child views.

the login component should shown @ /login path; that's simple enough. confuses me want / path show home component particular child component (let's call welcome) in main view. also, of other routes can think of should render child components inside home component.

so, reiterate:

path / renders home component welcome component inside it

path /foo renders home component foo component inside it

...

path /login renders login component

it feels structure thinking is:

  <route path='/' component={app}>     <indexroute component={home}>         <indexroute component={welcome}>         <route path='foo' component={foo}/>     </indexroute>     <route path='login' component={login}/>   </route> 

but wrong. correct way implement routing structure?

this solution, give try.

<route component={app}>   <route path="/" component={home}>     <indexroute component={welcome}/>     <route path="/foo" component={foo}/>   </route>   <route path="/login" component={login}/> </route>