Reactjs 组件结构：根据react路由器路径交换一个组件

我只是在学习React，在找出我的应用程序的最佳组件结构时遇到了一些困难

这是我的应用程序的一个非常粗略的表示。大多数页面布局都类似于此，只有少数例外

我有两个问题：

1）如果当用户单击右上角的“添加项目BTN”时，我想将“项目列表”替换为“添加项目表单”，那么构建此表单的最佳方式是什么

我可以有一个路由加载一个

ListItemsPage

组件，然后另一个路由加载一个

AddItemPage

，但这两个路由都有很多冗余代码（大部分是其他组件：侧栏控件、组列表等）。我想有一种更简单的方法来处理这类事情。或者我可以执行一个if语句，根据当前URL路径加载项列表或additem表单

2）重定向到默认组的最佳策略是什么？如果有人转到/group/7，那么我们将加载第7组的项目列表。但是，如果有人转到/group，我希望默认为组列表中的第一个组，以便应用程序的右侧永远不会为空

我的路线：（如果更有意义，可以更改这些路线）

{/*应转到/group/1*/}

经过周末的一番挖掘，我最终得出了这个解决方案。我不确定它是否是最优的，但它目前似乎对我来说非常有效

希望这有助于其他人：D

路线：

我希望孩子们出现在GroupMain中的位置： （在我的模型中可以看到“项目列表”）

{this.props.children？React.cloneElement（this.props.children，{propsYouWantToPassToChildren}）：“”

然后在GroupMain中处理重定向到默认ID的操作

组件将接收道具（下一步）{
const{dispatch，groups，selectedgroups，params}=nextProps；
const{groupId}=params；
//URL与状态不匹配。更新状态。
if（typeof groupId！=='undefined'&&（selectedGroup！==groupId | | selectedGroup.length==0））{
调度（selectGroup（groupId））；
返回；
}
//URL中没有selectedGroup和groupId。更新状态。
if（typeof groupId=='undefined'&&selectedGroup.length==0&&Object.keys（groups.length>0）{
const newSelectedGroup=Object.key（组）[0]；
发送（selectGroup（newSelectedGroup））；
this.context.router.push（`/group/${newSelectedGroup}`）；
}
}

经过周末的一番挖掘，我最终得出了这个解决方案。我不确定它是否是最优的，但它目前似乎对我来说非常有效

希望这有助于其他人：D

路线：

我希望孩子们出现在GroupMain中的位置： （在我的模型中可以看到“项目列表”）

{this.props.children？React.cloneElement（this.props.children，{propsYouWantToPassToChildren}）：“”

然后在GroupMain中处理重定向到默认ID的操作

组件将接收道具（下一步）{
const{dispatch，groups，selectedgroups，params}=nextProps；
const{groupId}=params；
//URL与状态不匹配。更新状态。
if（typeof groupId！=='undefined'&&（selectedGroup！==groupId | | selectedGroup.length==0））{
调度（selectGroup（groupId））；
返回；
}
//URL中没有selectedGroup和groupId。更新状态。
if（typeof groupId=='undefined'&&selectedGroup.length==0&&Object.keys（groups.length>0）{
const newSelectedGroup=Object.key（组）[0]；
发送（selectGroup（newSelectedGroup））；
this.context.router.push（`/group/${newSelectedGroup}`）；
}
}