React Router 什么时候该建立子路由

Question

问题： 如题。

---

具体：

我有一个大组件TransactionComponent, 组件内有很多Link, 现在，如果我点击Link后，React可能加载两个组件中的任意一种，取决于Link里面的参数，如status。现在我纠结的是是不是要做TransactionComponent的子路由，或者是创建同级别的路由。

TransactionComponent
｜－－－－－－－－－－－－－－－｜
｜－－－<Link>订单</Link>－－－－｜
｜－－－<Link>订单</Link>－－－－｜
｜－－－<Link>订单</Link>－－－－｜
｜－－－<Link>订单</Link>－－－－｜
｜－－－－－－－－－－－－－－－｜

当Link激活时，会有两种选择：

Component(或者SubComponent)
｜－－－－－－－－－－－－－－｜
｜－－－－－－数据－－－－－－｜
｜－－－－－－订单成功－－－－｜
｜－－－－－－－－－－－－－－｜
｜－－－－－－－－－－－－－－｜

Component(或者SubComponent)
｜－－－－－－－－－－－－－－｜
｜－－－－－－数据－－－－－－｜
｜－－－－－－订单失败－－－－｜
｜－－－－－－－－－－－－－－｜
｜－－－－－－－－－－－－－－｜

然后令我纠结的问题来了，应该怎么设计我的路由？每个订单都有一个唯一的id

希望大家给点建议，谢谢

Answer 1

这种需求应该把订单设计成一个单一的 Component 比如 OrderComponent，并且在 Routes 里绑定 path 比如：

<Route path='/orders/:id' component={OrderComponent} />

订单不同状态应该由 OrderComponent 从后端读取到的数据来决定应该加载哪部分的子 Component 或者只在渲染的时候根据状态输出不同的字符

这样的话 TransactionComponent 就不用关心 Order 的状态了，只需在其 render 方法里循环输出所有 Order 的链接即可，比如：

{
    this.props.orders.map(function(order){
        let order_id = "/orders/" + order.id;
        return <Link to={order_link}>订单：{order.name}</Link>;
    })
}

Answer 2

我在走查我们项目代码时，也发现了同样的问题，导致这样问题是没有理解，组件(视图)应该是高内聚，低耦合，参照这个六个字，反复读几遍，反复理解；什么叫高内聚？什么叫低耦合？一个组件的所有东西都应该在组件内完成，如果把一个组件中的内容拆成两个，反而会耦合到父层，这样以耦合，代码维护起来相当麻烦