Question

所以我的路线定义如下：

    <Route path="/manage" component={Manage}>
      <IndexRoute component={Manage}></IndexRoute>
      <Route path=":id" component={Edit}></Route>
    </Route>
  </Route>

现在，当我点击Manage组件中的按钮时，我会调用以下函数：

   handleEditClick(e) {
        e.preventDefault();
        let selectedId= this.state.selectedId;
        this.props.router.replace("/manage/" + selectedId); 
    },

我的浏览器确实显示了正确的链接但我的组件未按预期加载。它只呈现Manage组件而不是Edit组件。

我在这里错过了什么吗？

更新

将子路线更改为<Route path="/manage/:id" component={Edit}></Route>也会加载Manage组件

更新2

如果我不使用子路由，而是在同一级别创建它们，Edit组件会渲染，但我想使用子路由。

Answer 1

在你的render（）上，你需要一个{this.props.children} ...它在哪里React路由器知道放置子组件的位置

在您的路线中

<Route path="/manage" component={Manage}>
  <IndexRoute component={Manage}></IndexRoute>
  <Route path=":id" component={Edit}></Route>
</Route>

如果您导航到/manage/:id，React Router会渲染管理器和编辑组件......但是在哪里放置编辑？所以

你需要有这样的东西。

class Manager extends Component {
   render(){
     return (
       <div>
          Hello
          {this.props.children}
       </div>
     );
   }
}

因此，当您转到/manage/:id

时，React Router知道将Edit放在一边

<div>
   Hello
   <Edit />
</div>

仅路由器参数加载索引路由

1 个答案: