我可以使用菜单或按钮在单页应用上切换反应组件吗？

Question

这有点是this thread的延续，因为我发现了一个更好的方式来表达我的问题。

我想要做的就是按侧面菜单上的按钮，这将在屏幕的另一部分上切换反应组件。目前我的应用程序有嵌套路由，但我不知道如何从嵌套菜单更新组件。

以下是我想要做的事情：

基本上在我点击的每个选项中，我想要在<HelpPanel/>部分上呈现不同的组件或至少完全不同的信息（我有不同的图表，图像等需要显示）。

最初我试图通过嵌套路由来做到这一点，但达到了一个困难的程度，我不知道如何根据用户点击的项目更新我的<HelpPanel/>组件。这是当前的相关代码：

//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

导出类HelpPanel扩展了Component {

render(){

        return (

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

}

export class帮助扩展了Component {

渲染（）{

   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>
   );

} }

Answer 1

我已为此任务构建解决方案。不完美但它有效。
看看http://codepen.io/dagman/pen/gwzBjX 所以当你点击var word = 'race car'; var isPalindrome = function(word) { var nospaces = word.replace(/\s/g, ''); return nospaces.split('').reverse().join('') === nospaces; } option2替换<HelpPanel2 />等等时。当规定的url pathes匹配时，Afaik react-router是关于加载组件的。

<HelpPanel1 />