三种渲染方式
- component = (组件对象或函数)
<Route path="/home" component={Home} />
或
<Route path="/home" component={()=><Home />} />
- render = (函数)
<Route path="/home" render={props=><Home />} />
- children = (函数或组件)
<Route path="/about" children={props=>{
return <div>children渲染</div>
}} />
或
<Route path="/about" children={<About />} />
路由对象的传递
3种渲染区别总结
- component可以使用组件类渲染或内联式方式渲染,render只能使用函数,children使用函数或直接使用组件对象
- component内联式渲染方式在每次匹配路由成功后都将创建一个新组件,而后两者不会,所以用内联式方式建议使用后两者,内联方式渲染组件,推荐用render
- 当children的值是一个函数时,无论当前地址和path路径匹不匹配,都将会执行children对应的函数,当children的值为一个组件时,当前地址和path不匹配时,路由组件不渲染
- children函数方式渲染,会在形参中接受到一个对象,对象中match属性如果当前地址匹配成功返回对象,否则null