react-routerV6

58 阅读1分钟
<ROute path='/a' component={A}/> `

通过Route的component进行渲染的组件会给A组件传递三个属性:history,location,match。如果是render进行处理的,后期可以基于props/this.props获取传递的属性值!

//在render中可以获取传递的属性,但是组件中没有这些属性,此时我们需要自己传递给组件
<ROute path='/a' render={(props)=>{return <A {...props}/>}

image.png V6中多级路由都写在一个文件,通过outlet作为渲染多级路由的容器 image.png

image.png

image.png

image.png

image.png

image.png

问号传参:

image.png

获取参数:

image.png

路径传参:

image.png

image.png

image.png

隐式传参:目标组件刷新,传递的隐式信息还会存在,v5中会丢失,在v5和v6中页面url都不会显示查询参数

image.png

image.png

image.png

路由表匹配:

image.png

> 加个webpackChunName:"AChild"会将三个懒加载的js打包成一个文件AChild.js,不然会形成三个js文件进行三次加载。

image.png image.png

image.png

image.png

image.png

image.png