React组件传递、render方法及Privateroute路由配置相关疑问

结合你已经掌握的props基础，我们逐点拆解你提到的疑惑点：

1. component: Component 的含义 #

这是ES6对象解构赋值的重命名语法：

• 你在父组件使用Privateroute时，会和普通Route一样传入一个名为component的prop，比如 <Privateroute path="/user" component={UserCenter} />，这里的component对应的prop值就是你要渲染的业务组件
• 因为React要求自定义组件必须首字母大写才能被正确识别为组件（小写会被判定为原生HTML标签），所以我们在解构props时，把拿到的component参数重命名为大写的Component，后续才能用<Component />的形式正常渲染这个传入的组件。

2. ...rest 参数的来源 #

这是ES6解构赋值的剩余参数收集语法：

• 你给Privateroute传递的所有props里，除了被我们显式提取的component之外，剩下的所有属性（比如path、exact、strict这些路由配置属性）都会被自动收集到rest这个对象中。
• 举个例子，如果你写 <Privateroute exact path="/user" component={UserCenter} />，那么收集到的rest就是 { exact: true, path: "/user" }。

3. <Route {...rest}> 的作用 #

这是JSX的对象展开传递props的语法：

• 我们封装Privateroute的本质是在原生Route的基础上加了登录校验逻辑，最终还是要依赖react-router-dom的原生Route来做路径匹配。
• 这里的{...rest}就是把我们刚才收集到的所有路由配置属性（路径、匹配规则等）原封不动透传给原生Route组件，让它能正常识别匹配规则，命中对应路径时才触发后续的登录校验和渲染逻辑。

补充说明（render方法逻辑） #

render是react-router中Route组件的特殊prop，它接收一个函数，当Route匹配到对应路径时，就会自动调用这个函数，并且把路由相关的属性（match、location、history等）作为参数传入函数，函数返回的内容就是该路由要渲染的UI。
你示例中的逻辑就是：匹配到路径后先判断本地有没有登录凭证authToken，有就渲染之前传入的业务组件，同时把路由属性也透传给业务组件；没有就重定向到首页。

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