函数 NavLink

使用额外的 props 包装 <Link>，用于设置活动和待定状态的样式。

• 根据链接的活动和待定状态自动应用类，请参阅 NavLinkProps.className。
• 当链接处于活动状态时，自动将 aria-current="page" 应用于链接。请参阅 MDN 上的 aria-current。

import { NavLink } from "react-router"
<NavLink to="/message" />
Copy

状态可通过 className、style 和 children render props 获取。请参阅 NavLinkRenderProps。

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