使用React Router嵌套路由

Question

我的反应很新。 我正在使用typescript-react（.tsx）。 我在嵌套路线中苦苦挣扎。 如果url类似于file：/// D：/original/22-02-2017/app.html#/job-home，则将加载“ horMenu”组件，因为只有一个水平菜单可用。 在“ Jobpage”组件的indexroute内。 一切正常。 但是在水平菜单中，当我单击“批准”时，应加载“批准”组件，而在其中应加载另一个组件，即“ ThirdMenu”。 在“ ThirdMenu”组件内部，应加载“ ThirdMenuData”组件。 简而言之，当我单击“批准”时，三个组件应同时加载。

我的路由代码如下：

 <Router history={hashHistory}> <Route path="/" component={App}> <Route path="job-home" component={horMenu} > <IndexRoute component={JobPage} /> <Route path="/approvals" component={Approvals}> <Route path="/" component={ThirdMenu}> <IndexRoute component={ThirdMenuData} /> </Route> </Route> </Route> </Route> </Router> 

而我的组件代码如下：

认证

 export var Approvals = React.createClass({ getInitialState: function() { return( { "secondmenudata":[ {"name":"STEPS","id":1,"url":"steps"}, {"name":"RFI","id":2,"url":"rfi"}, {"name":"NCR","id":3,"url":"ncr"}, {"name":"SIGN-OFFS","id":4,"url":"sign-offs"} ] }); }, render: function() { return ( <div> <ul className="nav nav-pills tab-2" role="tablist"> { this.state.secondmenudata.map(function(name:any) { return <li key={name.id}><Link to={"/"+name.url} >{name.name}</Link></li> }) } </ul> <div className="scrolling-tabs-container3" > {this.props.children} </div> </div> ); } }); 

ThirdMenu

 export var ThirdMenu = React.createClass({ getInitialState:function() { return{ "thirdmenudata":[ {"name":"Unit 1","id":1,"url":"unit1"}, {"name":"Unit 2","id":2,"url":"Unit2"}, {"name":"Unit 3","id":3,"url":"Unit3"}, {"name":"Unit 4","id":4,"url":"Unit4"}, {"name":"Unit 5","id":5,"url":"Unit5"}, {"name":"Unit 6","id":6,"url":"Unit6"}, {"name":"Unit 7","id":7,"url":"Unit7"}, {"name":"Unit 8","id":8,"url":"Unit8"} ] }; }, render:function() { return( <div> <div > <ul className="nav nav-pills tab-3" role="tablist"> { this.state.thirdmenudata.map(function(name:any) { return <li key={name.id}><Link role="pill" data-toggle="pill" to={"/"+name.url} >{name.name}</Link></li> }) } </ul> </div> <div>{this.props.childern}</div> </div> ); } }); 

ThirdMenuData

 export var ThirdMenu = React.createClass({ render:function() { return( <div> <h1>this is approval Data</h1> </div> ); } }); 

请帮助我的代码出了什么问题

更新

但是当我按照以下路线

<Router history={hashHistory}>
      <Route path="/" component={App}>
        <Route path="job-home" component={horMenu} >
             <IndexRoute component={JobPage} />
             <Route path="/approvals" component={Approvals}>
               <Route  component={ThirdMenu}>
                  <IndexRoute component={ThirdMenuData} />
             </Route>
       </Route>
      </Route>

    </Router>

然后仅不显示最后一个组件“ ThirdMenuData”

我的结构应该像这样

Answer 1

您的路线有问题。 您不能在/approvals下使用/ route，因为本质上这是<IndexRoute /> 。

修改路线请见下文

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="job-home" component={horMenu} >
      <IndexRoute component={JobPage} />
      <Route component={Approvals}>
        <Route path="approvals" component={ThirdMenu}>
          <IndexRoute component={ThirdMenuData} />
        </Route>
      </Route>
    </Route>
  </Route>
</Router>

使用给定的嵌套配置，您的菜单应该在您进入domain.com/job-home/approvals时显示

编辑

追加其他路线

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="job-home" component={horMenu} >
      <IndexRoute component={JobPage} />
      <Route path="approvals" component={Approvals}>
        <Route path="third-menu" component={ThirdMenu}>
          <IndexRoute component={ThirdMenuData} />
        </Route>
      </Route>
    </Route>
  </Route>
</Router>

Answer 2

这是React Router的旧版本。 现在，我们可以使用React Router v4或React Router Dom的简单且非常动态的版本。

在这种情况下，子路由会在我们要显示路由组件的适当组件内使用。