带有反应路由器的嵌套路由

Question

我对反应很陌生。我正在使用 typescript-react(.tsx)。我在嵌套路线中苦苦挣扎。如果 url 类似于 file:///D:/original/22-02-2017/app.html#/job-home 然后 "horMenu" 组件将加载，因为只有一个水平菜单可用。在 "Jobpage" 组件将加载的索引路由中。它工作正常。但是在水平菜单中，当我单击 Approvals 时，"Approvals" 组件应该加载，并且在其中应该加载另一个名为 "ThirdMenu" 的组件。在 "ThirdMenu" 组件内，应该加载 "ThirdMenuData" 组件。简而言之，当我点击 "Approvals" 时，三个组件应该同时加载。

我的路由代码如下：

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

第三菜单

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 下有 / 路由，因为这本质上是 <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 路由器。现在我们可以使用 React router v4 or React Router Dom.

的简单且非常动态的版本

在此，子路由在我们要显示路由组件的适当组件内使用。

带有反应路由器的嵌套路由

nested routes with react router

reactjs

react-router

nested-routes

编辑