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

问题描述

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

I have a few pages in my app that have their own menus, besides of course the main menu. I wish at every time that the sub-menu is clicked to render a different component.

我被告知我可以使用 react-routes 来做到这一点，但它达到了我卡住并且不知道从那里去哪里的地步.这是我当前相关代码的示例:

I was told I could do that with react-routes, but it reaches a point where I get stuck and have no idea where to go from there. Here is a sample of my relevant current code:

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

}}

组件基本上是一个带有所有选项的侧边菜单，并且出现在 组件上的东西会发生变化取决于您选择的选项.

The <HelpMenu/> component is basically a side menu with all the options, and the things that appear on the <HelpPanel/> component changing depending on what option you chose.

我还画了我希望我的屏幕看起来像什么，以防这篇文章不清楚.

I also drew what I would like my screen to look like, in case this post isn't clear.

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

The bottom line is, I cannot figure out for the life of me, how I can change what appears on HelpPanel depending on what menu option you chose.

推荐答案

根据您显示的路由配置，事情看起来还不错，但您没有显示帮助菜单链接.我怀疑与孩子路线一起，是什么给你带来了问题:

Based on what you've show as your route config, things looks sort of okay, but you haven't shown your Help Menu links. I suspect that along with the child route, is what is giving you issues:

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

每个 :helpOption 的 component 应该是那个选项组件.因此，如果您有一个名为 HelpOptionOne 的组件，您可以改为这样做:

The component for each :helpOption should be that options component. So if you had a component called HelpOptionOne you would do this instead:

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

如果为 helpOption 建立一个链接，它看起来像这样:

If building a link for the helpOption it would look like this:

这可能不是您想要的，但是如果您以这种方式构建 href，它就会起作用.您可能想要的是:

which is probably not what you want, but if you built the href that way, it would work. What you might want is:

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

然后会得到你的

子路由在其路径中采用父路由.你只需要记住这一点.这是值得阅读的文档的重要部分.

Child routes take on their parent route in their path. You just have to remember that. This is a good part of the documentation to read.

这篇关于使用带有 react-route 的嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！