我的应用程序中有几个页面有自己的菜单，当然除了主菜单。我希望每次单击子菜单以呈现不同的组件。

有人告诉我我可以用 react-routes 来做到这一点，但它达到了我卡住的地步，不知道从那里去哪里。这是我当前相关代码的示例：

   //app.js
ReactDOM.render(
 <Router history={hashHistory}>
  <Route path="/" component={App} handler={App}>
    <IndexRoute component={Index}/>
    <Route path="about" component={About}>
    </Route>
    <Route path="help" component={Help}>
        <Route path="help/:helpOption" component={HelpPanel}/>
    </Route>

   </Route>
  </Router>,
  destination

);

//help.js
export class HelpPanel extends Component{
render(){

        return (

            <div>{this.props.params.helpOption}</div>
        );
}

}

export class Help extends Component{
  render(){
     return (
         <Grid>
             <Title/>
             <Row className="show-grid">
               <Col lg={2} md={4} sm={4}>
                    <HelpMenu/>
               </Col>
               <Col lg={8} md={8} sm={8}>
                    {this.props.children || "Please select topic from the menu for more information"}
               </Col>

           </Row>
       </Grid>
   );

} }

该<HelpMenu/>组件基本上是一个包含所有选项的侧边菜单，<HelpPanel/>组件上显示的内容会根据您选择的选项而变化。

我还画了我希望我的屏幕看起来的样子，以防这篇文章不清楚。

最重要的是，我一生都无法弄清楚如何根据您选择的菜单选项更改 HelpPanel 上显示的内容。