React高阶组件中rest与props的区别及渲染组件时是否需要同时传入

两个参数的本质区别 #

• rest是你调用ProtectedRoute组件时，外部传入的除了component之外的所有属性集合，比如你写<ProtectedRoute path="/user" exact component={User} needLogin />时，rest里就包含path、exact、needLogin这几个你主动传的属性，它的值完全由你调用组件时的传参决定。
• render回调里的props是React Router的Route组件内部生成的路由上下文参数，固定包含match、location、history三个核心路由对象，和你外部的传参没有关系，是Route运行时自动注入的。

是否需要同时传入两个参数 #

绝大多数场景下都需要同时传入，原因很明确：

• 只传rest的话，你的业务组件拿不到路由上下文的三个核心对象，只要组件里用到了路由跳转、路径参数获取这类能力就会直接报错。
• 只传props的话，你给ProtectedRoute传的自定义参数（比如上面例子里的needLogin）、路由配置参数都透不进业务组件，业务需要用到这些值的时候就拿不到。

注意：两个对象如果有同名属性，后展开的会覆盖先展开的。你现在的写法是{...rest} {...props}，如果出现重名会以Route注入的props值为准，如果你希望自定义的属性优先级更高，把两个的顺序调换即可。

举个实际调用的例子你就懂了：

// 调用ProtectedRoute的时候传的参数
<ProtectedRoute path="/order/:id" component={OrderDetail} needAuth={true} />

上面的场景里：

• rest包含path: "/order/:id"、needAuth: true
• 回调里的props包含路由匹配得到的match.params.id、当前地址信息location、跳转方法history.push等
  两个同时传入之后，OrderDetail组件才能同时拿到订单ID、自定义的权限校验标识这些需要的参数。

内容的提问来源于stack exchange，提问作者Jamie