NavLink
NavLink
是一个增强以后的Link
组件。相比Link
组件,NavLink
组件增加了导航菜单上常用的激活状态的控制。其实在实现逻辑上,NavLink
将Link
组件中的className
、style
和children
三个属性进行了重定义,这三个属性现在都可以接受一个函数作为其属性值了。这样一来,NavLink
组件就可以根据当前路由状态的匹配是否来动态的展示路由导航链接。以下是这三个属性的简要使用说明。
className
,可以接受一个签名为(props: { isActive: boolean }) => string | undefined
的函数。从这个函数的签名可以看出来,NavLink
会传递一个名为isActive
的参数属性来使函数知晓当前导航链接与路由位置的匹配状态。style
,可以接受一个签名为(props: { isActive: boolean }) => React.CSSProperties
的函数。这个函数的签名与className
可以接受的函数签名十分相似,只是需要返回一个React中常用的样式定义对象。children
,可以接受一个签名为(props: { isActive: boolean }) => React.ReactNode
的函数。因为children
属性都是表示组件所包裹的内容,所以这就表示NavLink
可以直接包裹一个函数,而不是只能包裹一个传统的React组件实例。
除此之外,NavLink
组件还有以下两个属性可供使用。
caseSensitive
,可以接受一个布尔类型的值,用于指示在匹配路由的时候是否使用大小写区分的精确匹配方法。end
,同样可以接受一个布尔类型的值,如果给定了true
的值,那么当其嵌套的子路由匹配的时候,那么这个父路由就不会被匹配了。