navlink

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

NavLink component wraps Link with active and pending styling

NavLink wraps the Link component with additional props for styling active and pending states. It automatically applies classes to the link based on its active and pending states, automatically applies aria-current="page" to the link when active, and makes states available through className, style, and children render props.

NavLink caseSensitive prop

The caseSensitive prop changes the matching logic to make it case-sensitive. By default, <NavLink to="/SpOnGe-bOB" /> with URL /sponge-bob results in isActive true. With caseSensitive prop, <NavLink to="/SpOnGe-bOB" caseSensitive /> with URL /sponge-bob results in isActive false.

NavLink children prop accepts function with render props

The children prop can be regular React children or a function that receives an object with the active and pending states of the link. Example: <NavLink to="/tasks">{({ isActive }) => <span className={isActive ? "active" : ""}>Tasks</span>}</NavLink>

NavLink className prop with automatic state classes

NavLink automatically applies classes that correspond to the state: a.active for the active state, a.pending for the pending state, and a.transitioning for the transitioning state with view-transition-name. The className prop can also be a function that receives NavLinkRenderProps and returns the className string.

NavLink className render props example

NavLink className can be a function receiving NavLinkRenderProps: <NavLink className={({ isActive, isPending }) => (isActive ? "my-active-class" : isPending ? "my-pending-class" : "")} />

NavLink discover prop for lazy route discovery

The discover prop defines the link lazy route discovery behavior. Valid values are: render (default, discovers the route when the link renders) and none (don't eagerly discover, only discover if the link is clicked). Mode: framework only.

NavLink end prop changes active matching logic

The end prop changes the matching logic for the active and pending states to only match to the end of the to prop. Without end: <NavLink to="/tasks" /> matches both /tasks and /tasks/123. With end: <NavLink to="/tasks" end /> matches /tasks but not /tasks/123. Exception: <NavLink to="/"> only matches the root route and ignores the end prop.

NavLink prefetch prop values

The prefetch prop defines data and module prefetching behavior. Valid values are: none (default, no prefetching), intent (prefetches on user hover or focus), render (prefetches when link renders), and viewport (prefetches when link is in viewport, useful for mobile). Prefetching uses HTML <link rel="prefetch"> tags inserted after the link. When using nav :last-child, switch to nav :last-of-type to avoid styles conditionally falling off the last link.

NavLink preventScrollReset prop

The preventScrollReset prop prevents the scroll position from being reset to the top of the window when the link is clicked and the app is using ScrollRestoration. This only prevents new locations resetting scroll to the top; scroll position will be restored for back/forward button navigation. Mode: framework, data.

NavLink relative prop path resolution

The relative prop defines relative path behavior. Valid values are: route (default, resolves relative to the route pattern) and path (resolves relative to the URL path). With route: "..." removes both :slug/edit segments back to /blog. With path: "..." removes only one URL segment. Index routes and layout routes are not included in relative path calculation.

NavLink reloadDocument prop uses document navigation

The reloadDocument prop will use document navigation instead of client side routing when the link is clicked; the browser will handle the transition normally as if it were an <a href> element.

NavLink replace prop replaces history stack entry

The replace prop replaces the current entry in the History stack instead of pushing a new one. With a history stack like A -> B, a normal link click pushes a new entry A -> B -> C, but with replace, B is replaced by C resulting in A -> C.

NavLink state prop adds persistent routing state

The state prop adds persistent client side routing state to the next location. Example: <Link to="/somewhere/else" state={{ some: "value" }} />. The location state is accessed from the location object via location.state. State is inaccessible on the server as it is implemented on top of history.state.

NavLink style prop with render props

The style prop can be applied dynamically via a function that receives NavLinkRenderProps and returns the styles object. Example: <NavLink to="/tasks" style={({ isActive, isPending }) => ({color: isActive ? "red" : isPending ? "blue" : "black"})} />

NavLink to prop accepts string or partial Path object

The to prop can be a string or a partial Path object. String example: <Link to="/some/path" />. Path object example: <Link to={{ pathname: "/some/path", search: "?query=string", hash: "#hash" }} />

NavLink viewTransition prop enables View Transition API

The viewTransition prop enables a View Transition for this navigation. Example: <Link to={to} viewTransition>Click me</Link>. To apply specific styles for the transition, use useViewTransitionState. Mode: framework, data.

NavLink basic usage example

Basic NavLink usage: <NavLink to="/message">Messages</NavLink>. Using render props: <NavLink to="/messages" className={({ isActive, isPending }) => isPending ? "pending" : isActive ? "active" : ""}>Messages</NavLink>

Give your agent this brain