ReactJS - ネストされたルートに応じて親のコンポーネントを変更する

Question

私のアプリケーションは、ヘッダ、フッタ、ルーティングされた子コンポーネントをレンダリングするコンポーネントにラップされています。

<Header />のコンポーネントを/ adminにある</HeaderAdmin/>に置き換えようとしています。そのために

ルート

<Route path='/' component={SiteWrapper} > 
    <IndexRoute component={Home} /> 
    <Route path="admin" component={Admin}> 
    <Route path="dashboard" component={Dashboard}/> 
    </Route>  
</Route> 

SiteWrapperコンプ

export default class SiteWrapper extends React.Component { 
    render() { 
     return (
      <div> 
       <Header/> // Want to replace with <AdminHeader /> if on /admin 
       <div className="container"> 
        {this.props.children.props.route.header ? <PageHeader header={this.props.children.props.route.header} /> : null} 
        {this.props.children} 
       </div> 
       <Footer/> 
      </div> 
     ) 
    } 
} 

Answer 1

あなたは私たちがこれを行うことができれば、なぜ私たちも、ルータの反応から が必要なのですかルート名

export default class SiteWrapper extends React.Component { 
    render() { 
     return (
      <div> 
       {(this.prop.location.pathname === 'admin')? <AdminHeader/>: <Header/>} 
       <div className="container"> 
        {this.props.children.props.route.header ? <PageHeader header={this.props.children.props.route.header} /> : null} 
        {this.props.children} 
       </div> 
       <Footer/> 
      </div> 
     ) 
    } 
} 

Answer 2

ルートならば、私は、あなたがwindow.locationまたはthis.props.location.pathnameでルートを確認することができ、それがルートの名前が含まれているだろうと思い名前は/adminです。そうでない場合はHeaderコンポーネントをレンダリングしますrenderAdminHeaderコンポーネント。このような

書き込み、それを：

{ this.prop.location.pathname === '/admin'? <AdminHeader/>: <Header/>}