使用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组件时，大多数问题的一部分上方。

据我所知，目前我正在尝试做的事情是行不通的。我想要的基本上是发布页面组件之一，或者如果您在.../help/reference路径中发布该引用组件。有什么办法可以做到这一点？我已经搞混了一点，但到目前为止，什么也没有。

Answer 1

只需更改路线配置，以便根据所选索引，您可以在HelpPage之下显示HelpPanels作为子路线，并显示ReferenceComponent的参考路线。由于引用路由是帮助路由的子路由，因此您无需在配置对象中将完整路径明确写为/ 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 
); 

然后只显示{this.props.children}下HelpPage组件。

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> 

     ) 
    } 
}