NavLink

NavLink是一个增强以后的Link组件。相比Link组件,NavLink组件增加了导航菜单上常用的激活状态的控制。其实在实现逻辑上,NavLinkLink组件中的classNamestylechildren三个属性进行了重定义,这三个属性现在都可以接受一个函数作为其属性值了。这样一来,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的值,那么当其嵌套的子路由匹配的时候,那么这个父路由就不会被匹配了。