2017-01-18 4 views
0

私はリアクタを使ったリアクションアプリを持っています。私は単純な機能で苦労しています。基本レイアウトルートにパラメータを渡す

<Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
     <IndexRoute component={Home}></IndexRoute> 
     <Route path="reports" name="reports" component={Reports}></Route> 
     <Route path="help" name="help" component={Help}></Route> 
    </Route> 
</Router> 

をなど、私のLayoutコンポーネントになります:私は、次のルートが設定されている私はthis.props.titleこのLayoutコンポーネントでレンダリングすることを渡すことができますどのように知っていただきたいと思い

<div class="content-wrapper"> 
    <section class="content-header"> 
     <h1>{this.props.title}</h1> 
    </section> 
    <section class="content" ref="content"> 
     <div class="content-pad"> 
      {this.props.children} 
     </div> 
    </section> 
</div> 

1)経路では:

<Route path="reports" name="reports" component={Reports} title="Reports"></Route> 

2)リンクにおいて:

<Link to="reports" title="Reports"><span><i class="fa fa-file"></i> Reports</span></Link> 

3)クエリPARAMとのリンクにおいて:

は、私は、次の試みています

<Link to={{ pathname: 'help', query: { title: 'Help' } }}><span><i class="fa fa-question"></i> Help</span></Link> 

ありがとうございます!

+0

'タイトル' プロパティがから来ることになっている場合は?それはダイナミックになるか、より高いコンポーネントから渡されますか?それとも、手作業で渡すだけですか?レイアウトコンポーネントのようなものがトップレベルのものだと思われる – Jayce444

+0

まさに。レイアウトは他のページの「コンテナ」です。 'title'プロパティは、それがレンダリングしているページのタイトルをレンダリングできるように、それに渡されます。 –

答えて

1

これを試してみてください:

<Route path="/" title="my awesome title" component={Layout}> 

とレイアウトコンポーネントで

は:

<h1>{this.props.route.title}</h1> 
+0

this.props.routeを呼び出すことによって、子コンポーネント内のタイトルにアクセスできます。タイトル – Trinu

関連する問題