Using nested routes with 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.

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.

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.

回答1:

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>

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>

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

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

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>

which would then get your

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

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.

来源：https://stackoverflow.com/questions/39984426/using-nested-routes-with-react-route