reactjsとreact-routerを使用すると、コンポーネントまたは{this.props.children}を表示できますか？

Question

ここにシナリオがあります：特定の単語をクリックして参照ページ/コンポーネントにリンクするコンポーネントがたくさんあります。

ハイライトされた単語がクリックされていない場合は、コンポーネントを表示するだけです（このメカニズムと側面のメニュー全体を許可する多くのものがあります）。

//app.js 
ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={App} handler={App}> 
     <IndexRoute component={Index}/> 
     <Route path="help" component={HelpPage}> 
      <Route path="/help/reference" component={ReferenceComponent}></Route> 
     </Route> 

    </Route> 
    </Router>, 
    destination 
); 

//help.js: 
export default class HelpPage extends Component { 
    render() { 
     return (
      <Grid> 
       <Title/> 
       <Row className="show-grid"> 
        <Col lg={2} md={4} sm={4}> 
         <HelpMenu 
          getBtnId={this.getBtnId} 
         /> 
        </Col> 
        <Col lg={10} md={8} sm={8}> 
//part that most matters (currently doesnt work) 
         {<HelpPanels panelIndex={this.state.panelIndex}/> || 
         this.props.children} 
        </Col> 

       </Row> 
      </Grid> 

     ) 
    } 
} 

私は右のほとんどの問題は、私のHelpPageコンポーネントをレンダリングすることを一部の上コメント：

は、ここで現在のコードです。

私は現在行っていることがうまくいかないことを理解しています。私が欲しいのは、基本的にページのコンポーネントの1つを投稿するか、.../help/referenceルートにいる場合はそのReferenceコンポーネントを投稿することです。私はこれを行うことができる方法はありますか？私はそれをちょっとだけぶち込んだけど、これまで何もなかった。

Answer 1

HelpPageの下にHelpPanelsを子ルートとして表示し、参照ルートにはReferenceComponentと表示するように、選択したインデックスに応じてルート設定を変更してください。参照ルートはヘルプルートの子ルートなので、configオブジェクトに/ help/referenceとしてフルパスを明示的に記述する必要はありません。

ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={App} handler={App}> 
     <IndexRoute component={Index}/> 
     <Route path="help" component={HelpPage}> 
      <Route path="details/:helpId" component={HelpPanels}/> 
      <Route path="reference" component={ReferenceComponent}></Route> 
     </Route> 

    </Route> 
    </Router>, 
    destination 
); 

それからちょうど HelpPageコンポーネントの下 {this.props.children}を表示します。

export default class HelpPage extends Component { 
    render() { 
     return (
      <Grid> 
       <Title/> 
       <Row className="show-grid"> 
        <Col lg={2} md={4} sm={4}> 
         <HelpMenu 
          getBtnId={this.getBtnId} 
         /> 
        </Col> 
        <Col lg={10} md={8} sm={8}> 
//if the route is /help/reference the children will be `ReferenceComponent` component or if it is something in the format /help/details/3 it will show `HelpPanels` component and this.props.params.helpId will be 3. 
         {this.props.children} 
        </Col> 

       </Row> 
      </Grid> 

     ) 
    } 
}