I am very new in react. I am working with typescript-react(.tsx). I am struggling in nested routes. if url is like file:///D:/original/22-02-2017/app.html#/job-home
then the "horMenu" component will loads, in that only one horizontal menu is available. And inside the indexroute of that the "Jobpage" component will loads. It is working fine. But in horizontal menu when i click on Approvals the "Approvals" component should load, and inside that the another component should load called "ThirdMenu". And inside "ThirdMenu" component the "ThirdMenuData" component should load. In short when i click on "Approvals" three component should load at same time.

My routing code is as follows:

```html
<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>
```

And my components code as follows:

**Approvals**

```js
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**

```js
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** 

```js
export var ThirdMenu = React.createClass({

    render:function()
    {
        return(
            <div>
                <h1>this is approval Data</h1>
            </div>
        );
    }
});
```

Plz help what is wrong with my code

**UPDATED**

but when i put following route

```
<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>

```

then only last component "ThirdMenuData" not displayed 

My structure should look like this
[![enter image description here](https://i.stack.imgur.com/WoWmu.png)](https://i.stack.imgur.com/WoWmu.png)