React Router路由细讲(二路由道具(Route props))

在Route中我们可以有三种方法去render。使用render函数我们可以用js语言来构建DOM.




这三个方法都使用下面三个相同的路由道具(Route props)

match
location
history

接下来我们一个方法一个的讲。

1、component

仅在location匹配时呈现的React组件。它将使用路径道具进行渲染。
我们以Contact组件为列。
React Router路由细讲(二路由道具(Route props))_第1张图片
React Router路由细讲(二路由道具(Route props))_第2张图片React Router路由细讲(二路由道具(Route props))_第3张图片
这个时候发现它是对的。当我们把location的path改了,再看看
React Router路由细讲(二路由道具(Route props))_第4张图片
React Router路由细讲(二路由道具(Route props))_第5张图片
这个时候发现路由没有出来。所以,我们知道了,当使用componennt的时候,它去匹配location,如果匹配成功那么就跳转。也就render成功。

2、render

React Router路由细讲(二路由道具(Route props))_第6张图片
React Router路由细讲(二路由道具(Route props))_第7张图片
这个时候你会发现一个问题,我们的NavLink To和path和组件名字不一样都可以。但是在component的时候是不可以的。所以在使用render的时候,路由匹配函数就会调用。
而使用render,我们可以进行传递参数。如果使用props的话。我们也可以在组件里面打印出location、match、history。
在这里插入图片描述
你也可以直接把state的值传过去
在这里插入图片描述
React Router路由细讲(二路由道具(Route props))_第8张图片
在这里插入图片描述
所以我们知道render传递参数是很方便的。但是为什么却没有普遍使用呢。看看这个地方你应该就知道啦。https://blog.csdn.net/chiuwingyan/article/details/80204966
React Router路由细讲(二路由道具(Route props))_第9张图片
React Router路由细讲(二路由道具(Route props))_第10张图片

3、children

不管路由是否匹配都会渲染对应组件
React Router路由细讲(二路由道具(Route props))_第11张图片
React Router路由细讲(二路由道具(Route props))_第12张图片
在这里插入图片描述
到这里、这一节差不多完啦。
从上一节和这一节,其实我主要讲了Route的一些属性。随便把它其它属性说一下。
exact:
只有在路径location.pathname 完全匹配时才匹配。
strict:
path具有尾部斜杠的a只会与尾部斜杠匹配location.pathname。如果有其他网段,则无效location.pathname。 strict可以用来强制执行a location.pathname没有尾部斜杠,但为了做到这一点strict,exact必须这样做true。
sensitive:
区分大小写

你可能感兴趣的:(路由,前端,react)