ReactJs - Комплексное дерево маршрут

Question

У меня есть эта Route конфигурацию (строили с react-router)

<Router history={history}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Index}/> 
     <Route path="studio" component={Studio}> 
      <Route path="/studio/detail" component={Calendar} /> 
     </Route> 
    </Route> 
</Router> 

и component App делает этот:

render() { 
     return (
      <div> 
       <nav className="navbar"> 
        <div className="container-fluid"> 
         <ul className="nav navbar-nav navbar-right"> 
          <li><Link className="menu-link" ref="menu" to="/studio">Studio</Link></li> 
         </ul> 
        </div> 
       </nav> 
       <div id="content-wrapper">{this.props.children}</div> 
      </div> 
     ) 
    } 

Мой маршрут /studio/detail вызывается из другого компонента, но когда я попробуйте увидеть его, я не вижу свою страницу, вместо этого я вижу ее родителя /studio.

Answer 1

Когда вы в гнездо вашего <Route> s, как указано выше, React Router будет гнездовать соответствующие компоненты за https://github.com/rackt/react-router/blob/v1.0.0/docs/guides/basics/RouteConfiguration.md#decoupling-the-ui-from-the-url.

Если вам не нужно гнездо <Calendar> под номером <Studio>, то не вставьте соответствующие маршруты.