类型别名 NavLinkRenderProps

NavLinkRenderProps: {
    isActive: boolean;
    isPending: boolean;
    isTransitioning: boolean;
}

传递给 NavLink children、className 和 style 属性回调的对象，用于根据链接的状态渲染和设置链接样式。

// className
<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>

// style
<NavLink
  to="/messages"
  style={({ isActive, isPending }) => {
    return {
      fontWeight: isActive ? "bold" : "",
      color: isPending ? "red" : "black",
    }
  )}
/>

// children
<NavLink to="/tasks">
  {({ isActive, isPending }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>

类型声明

isActive: boolean
指示链接的 URL 是否与当前位置匹配。
isPending: boolean
指示待定位置是否与链接的 URL 匹配。
isTransitioning: boolean
指示到链接 URL 的视图过渡是否正在进行中。请参阅 useViewTransitionState