react路由渲染

三种渲染方式

• 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