React Router受保护路由PrivateRoute示例的两点技术疑问

下面针对你贴出的React Router v5版受保护路由实现，逐一拆解两个核心疑问：

1. 传入小写component属性，为什么要用大写<Component>标签渲染目标组件 #

• 这是严格遵循JSX的语法解析规则：JSX 在编译转换时，所有小写开头的标签名会被默认判定为浏览器原生DOM元素（比如<div>、<button>），不会走自定义组件的渲染逻辑；只有大写开头的标签名，才会被识别为项目中自定义的React组件。
• 代码里写的({ component: Component, ...rest })是JS标准的解构别名语法：我们从传入的props中取出键名为component的属性（也就是使用PrivateRoute时传进来的Book组件本身），直接把这个值赋值给一个叫Component的大写变量，纯粹是为了满足JSX对自定义组件标签名的大写要求。
• 要是这里图省事直接写成<component {...props} />，React根本不会把它和传入的Book组件做关联，只会尝试在页面上渲染一个浏览器原生的<component>标签，完全达不到正常路由渲染的效果。

2. 其他属性通过...rest传递给Route组件后，render方法接收到的props来源是什么 #

• 这个入参props完全是React Router原生的Route组件自动注入的，不是我们从外层手动传进去的。
• 我们把路径匹配相关的配置（比如exact匹配规则、path="/books"路径）通过...rest展开传给原生Route组件后，Route会自动监听当前浏览器的URL变化：一旦当前地址和配置的路径匹配成功，就会主动调用我们传给它的render prop对应的回调函数，同时把三个核心路由上下文对象作为入参传给这个回调。
• 这些自动注入的props本身自带三个核心属性：match（当前路径的匹配结果）、location（当前页面的地址信息）、history（提供路由跳转的方法）。后续我们把这些props透传给鉴权通过后渲染的目标组件，也是为了避免外层封装打断路由上下文的传递，让内部的业务组件能正常拿到路由相关的能力。

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