react-router IndexRoute is not working

Question

I created the code below

<Route path="admin" component={App} >
  <IndexRoute component={Product_Category} />
  <Route path="product">
    <Route path="category" component={Product_Category} />
    <Route path="register" component={Product_Register} />
    <Route path="manage" component={Product_Mgt} />
    <Route path="brand" component={Product_Brand} />
  </Route>
  <Route path="library">
    <Route path="promotion" component={Library_Promotion} />
    <Route path="best" component={Library_Best} />
  </Route>
</Route>

and I changed the code like below

<Route path="/" component={App}>
  <Route path="admin" component={BasicSet}>
    <IndexRoute component={Product_Category} />
    <Route path="product">
      <Route path="category" component={Product_Category} />
      <Route path="register" component={Product_Register} />
      <Route path="manage" component={Product_Mgt} />
      <Route path="brand" component={Product_Brand} />
    </Route>
    <Route path="library">
      <Route path="promotion" component={Library_Promotion} />
      <Route path="best" component={Library_Best} />
    </Route>
  </Route>
</Route>

After I changed the code, only <Route path="admin" component={BasicSet} works. Except for that, none of pages are shown. In console, there is no error. When I remove <Route path="admin" component={BasicSet} , all of pages are shown. I don't know why. Please solve this problem.

Also, code below is working.

<Route path="/" component={App}>
  <IndexRoute component={Product_Category} />
  <Route path="product">
    <Route path="category" component={Product_Category} />
    <Route path="register" component={Product_Register} />
    <Route path="manage" component={Product_Mgt} />
    <Route path="brand" component={Product_Brand} />
  </Route>
  <Route path="library">
    <Route path="promotion" component={Library_Promotion} />
    <Route path="best" component={Library_Best} />
  </Route>
</Route>

BasicSet.jsx code return only other components that works.

class BasicSet extends Component{
    render(){
        return(
          <div>
            <Nav />
            <Menu />
          </div>
        );
    }
}

Answer 1

Try this out,

class BasicSet extends Component{
    render(){
        return(
          <div>
            <Nav />
             {this.props.children}
            <Menu />
          </div>
        );
    }
}