Question

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

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

   //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上显示的内容。

Answer 1

根据您的路线配置显示的内容，看起来不错，但您还没有显示“帮助菜单”链接。我怀疑，伴随着孩子的路线，是什么给你带来了问题：

p - q is 1

每个<Route path="help" component={Help}> <Route path="help/:helpOption" component={HelpPanel}/> </Route>的{{1}}应该是该选项组件。因此，如果你有一个名为component的组件，你可以这样做：

:helpOption

如果为HelpOptionOne构建链接，它将如下所示：

<Route path="help" component={HelpPanel}> <Route path="help/:helpOption" component={HelpOptionOne}/> </Route>

这可能不是你想要的，但是如果你用这种方式构建href，那就行了。你可能想要的是：

helpOption

然后会得到你的

<Link to="/help/help/optionOne">Option 1</Link>

子路径在其路径中采用其父路由。你只需记住这一点。 This is a good part of the documentation to read

使用带有react-route的嵌套路由

1 个答案: