React路由中传递组件为何无需{...props}？

嘿，我来帮你理清这个困惑！其实核心点在于区分Route给组件传递内置路由props和你自己给组件传递自定义props这两件事：

• 首先，当你用Route的render属性时，这个回调函数的作用就是让你手动返回要渲染的React元素。你写的render={() => ( <PropDrilling user="Someone" /> )}，本质上就是直接给PropDrilling组件传递了user这个自定义props——这和你平时在React里写<PropDrilling user="Someone" />是完全一样的逻辑，所以组件里this.props能拿到user是理所当然的，这和Route的特殊机制无关。

• 那为什么之前的资料里会提到render={(props) => ( <Dashboard {...props} isAuthed={true} /> )}这种写法呢？这里的props是Route自动传给render回调的内置路由props（包括match、location、history这三个核心对象）。如果你希望你的组件能拿到这些路由相关的信息，就需要用...props把它们解构传递给组件；但如果你不需要这些路由props，只需要传递自己的自定义props，那完全可以不用管这个props参数，直接像你写的那样传自定义属性就行。

举个对比例子更清楚：

// 写法1：只传自定义props，组件只能拿到user
<Route path="/" render={() => <PropDrilling user="Someone" />} />

// 写法2：同时传路由内置props和自定义props，组件能拿到user + match/location/history
<Route path="/" render={(routeProps) => <PropDrilling {...routeProps} user="Someone" />} />

// 用component属性时，Route自动传递路由props，你没法直接加自定义props（除非用其他方式）
<Route path="/" component={PropDrilling} />

简单来说，render回调给了你完全的控制权：你想给组件传什么props，就传什么——路由内置props是可选的，自定义props的传递逻辑和普通React组件完全一致。

内容的提问来源于stack exchange，提问作者Guillermo Vázquez