在新发布的react-router 5.0中,route组件有三个支持组建渲染的属性,那我们到底该如何使用他们呢,今天就让我们详细的了解一下~
render
render属性能使你便捷的渲染内联组件或是嵌套组件,你可以给这个属性传入一个函数,当路由的路径匹配时调用。同时,render属性也会接受所有由route传入的所有参数。
//内联方式
<Route path="path" render={() => <div>这是内联组件写法</div>} />
//嵌套组合方式
<Route path="path" render={ props => (
<ParentComp>
<Comp {...props} />
</ParentComp>
) />
children
children属性是这三个属性中比较特殊的一个,它的值为一个函数,当Route有children属性时,不管当前的路径是否与Route匹配,该函数都会执行,同时,children属性也会接受所有由route传入的所有参数。
<Route path="path" children={ props => (
<div className={props.match? "active": ''}>
<Link to="path" />
</div>
) />
component
当你使用component属性时,router会通过你赋给该属性的值,使用React.createElement方法去创建一个新的React元素,这意味着如果你给component属性赋的值是一个内联函数,那他每次渲染都会创建一个新的组件,这会导致每次渲染都会伴随新组件的挂载和旧组件的卸载,而不是只是对已存在组件的更新操作。 所以当你要使用内联函数进行组件渲染时,使用render或children属性会更合适些。
const Comp = props => <div>{props.match.params.name}</div>
<Route path="path" component={Comp} />
注意
在使用Route的这三个属性渲染组件时还有一点值得注意,就是当这三个属性同时存在时的优先级问题,正常情况下我们基本上使用其中一个属性就可以了,但当他们同时存在时,优先渲染component的值,其次是render属性的值,而children属性的值优先级最低,为了避免 不必要的错误,尽量每个Route中只是用他们三个中的其中一个。
component > render > children