nested routes with react router

Question

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:

<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

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

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

no any errors displayed – Hardik Chaudhary Mar 03 '17 at 07:04 — Hardik Chaudhary, Mar 03 '17 at 07:04

Deividas · Answer 1 · 2017-03-03T08:29:54.620

0

There's a problem with your routes. You cannot have / route under /approvals, because this is <IndexRoute /> in it's essence.

See below for modified routes

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

With the given nested configuration your menu should show up when you got to domain.com/job-home/approvals

Edit

Appending additional routes

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

edited Mar 03 '17 at 08:29

answered Mar 03 '17 at 07:05

Deividas

6,437
2
26
27

i cant do that because i have too many routes with similar components with ThirdMenu.. – Hardik Chaudhary Mar 03 '17 at 07:16
@HardikChaudhary what do you mean? Can you give an example that you are using? – Deividas Mar 03 '17 at 07:17
see an image in question – Hardik Chaudhary Mar 03 '17 at 07:28
@HardikChaudhary I have updated my answer. You were missing a closing `` tag when using `ThirdMenu` component. The above structure works. – Deividas Mar 03 '17 at 07:39
@HardikChaudhary do you get any errors? What part is not shown? I need more info to debug this. – Deividas Mar 03 '17 at 08:05
@HardikChaudhary check the updated post. With the given nested configuration your menu should show up when you got to `domain.com/job-home/approvals` – Deividas Mar 03 '17 at 08:09
in the question an image where the ThirdMenuData is written that is the area where data of this component should print. I want three components to be loaded when i have domain.com/approvals this url – Hardik Chaudhary Mar 03 '17 at 08:12
@HardikChaudhary `` can be used only for 1 level deep components. Check my update. – Deividas Mar 03 '17 at 08:18
I know that but what if we have this kind of situations?? – Hardik Chaudhary Mar 03 '17 at 08:21
@HardikChaudhary then you can 1) import the components inside other components; 2) append additional route, e.g. `domain.com/job-home/approvals/thirdMenu`; 3) use tabs with components state. – Deividas Mar 03 '17 at 08:24
how can i append additional routes? – Hardik Chaudhary Mar 03 '17 at 08:28
it is producing an error: Warning: [react-router] Location "/approvals" did not match any routes – Hardik Chaudhary Mar 03 '17 at 08:33
@HardikChaudhary because you must change your link to `.../approvals/third-menu` since `/approvals` does not exist. – Deividas Mar 03 '17 at 08:35
@HardikChaudhary happy to help! `domain.com/job-home/approvals/third-menu` is a valid route using the definition provided in the edit. Please check the code for typos. – Deividas Mar 03 '17 at 19:57

score 0 · Accepted Answer · answered Dec 07 '18 at 10:53

0

This is an old version of react router. Now we can use easy and very dynamic version of React router v4 or React Router Dom.

In this, child routes used inside the appropriate component where we want to display the route's component.

answered Dec 07 '18 at 10:53

Hardik Chaudhary

1,200
1
8
24

nested routes with react router

2 Answers2

Edit