react-router IndexRoute不起作用

Question

我在下面创建了代码

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

我更改了如下代码

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

更改代码后，仅<Route path="admin" component={BasicSet}有效。 除此之外，没有任何页面显示。 在控制台中，没有错误。 当我删除<Route path="admin" component={BasicSet} ，将显示所有页面。 我不知道为什么 请解决这个问题。

另外，下面的代码正在工作。

<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代码仅返回其他有效的组件。

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

Answer 1

试试看

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