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

Question

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

有人告诉我，我可以使用 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 上显示的内容。

Answer 1

根据您显示的路线配置，情况看起来还不错，但您尚未显示帮助菜单链接。我怀疑与子路线一起给您带来问题的是：

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

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

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

如果为helpOption 建立一个链接，它将如下所示：

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

这可能不是您想要的，但是如果您以这种方式构建 href，它将起作用。你可能想要的是：

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

这会得到你的

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

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