3月19日【CSS】【React-Router Route】

Route 的三种渲染方法

3种渲染方法都支持接受 match history 和 location 参数

即被Route包装的组件可以写成如下形式

const About = ({ match, history, location })=> ...
<Route path="/about" component={About}/>
<Route path="/about" render={()=><About />}/>
<Route path="/about" children={()=><About />}/>

以上， render 和 component渲染的方式非常相似， 只不过render可以携带参数，而component不能。在大多数情况下使用component就可以了。
render 不能和 component 同时使用，因为这是没有意义的， component有比 render更高的优先级。render的渲染性能比component要高，由于component的渲染方式当路由离开当前路径，当前组件将会被卸载，相反如果进入则装载， 而render 持续维持挂载状态。

关于 children渲染方法， children同样接受一个回调函数，同render一样。children 将渲染成Route 的子组件，所谓子组件，即即便路由路径没有匹配到当前路由，该组件也会被渲染。 如：

<Route path="/about" children={()=><About />} /> // about 将持续存在于页面 

关于CSS

css这种东西实践性太强，没有什么探讨价值， 存粹靠手感，故不作讨论。