Wraps Link with additional props for styling active and pending states.
aria-current="page"
to the link when the link is active. See aria-current
on MDN.import { NavLink } from "react-router";
<NavLink to="/message" />;
States are available through the className, style, and children render props. See NavLinkRenderProps.
<NavLink
to="/messages"
className={({ isActive, isPending }) =>
isPending ? "pending" : isActive ? "active" : ""
}
>
Messages
</NavLink>
Changes the matching logic to make it case-sensitive:
Link | URL | isActive |
---|---|---|
<NavLink to="/SpOnGe-bOB" /> |
/sponge-bob |
true |
<NavLink to="/SpOnGe-bOB" caseSensitive /> |
/sponge-bob |
false |
Can be regular React children or a function that receives an object with the active and pending states of the link.
<NavLink to="/tasks">
{({ isActive }) => (
<span className={isActive ? "active" : ""}>Tasks</span>
)}
</NavLink>
Classes are automatically applied to NavLink that correspond to the state.
a.active {
color: red;
}
a.pending {
color: blue;
}
a.transitioning {
view-transition-name: my-transition;
}
Note that pending
is only available with Framework and Data modes.
Defines the link discovery behavior
<Link discover="render" />
Changes the matching logic for the active
and pending
states to only match to the "end" of the NavLinkProps.to. If the URL is longer, it will no longer be considered active.
Link | URL | isActive |
---|---|---|
<NavLink to="/tasks" /> |
/tasks |
true |
<NavLink to="/tasks" /> |
/tasks/123 |
true |
<NavLink to="/tasks" end /> |
/tasks |
true |
<NavLink to="/tasks" end /> |
/tasks/123 |
false |
<NavLink to="/">
is an exceptional case because every URL matches /
. To avoid this matching every single route by default, it effectively ignores the end
prop and only matches when you're at the root route.
Defines the data and module prefetching behavior for the link.
<Link prefetch="intent" />
Prefetching is done with HTML <link rel="prefetch">
tags. They are inserted after the link.
<a href="..." />
<a href="..." />
<link rel="prefetch" /> // might conditionally render
Because of this, if you are using nav :last-child
you will need to use nav :last-of-type
so the styles don't conditionally fall off your last link (and any other similar selectors).
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 reseting scroll to the top, scroll position will be restored for back/forward button navigation.
<Link to="?tab=one" preventScrollReset />
Defines the relative path behavior for the link.
<Link to=".." /> // default: "route"
<Link relative="route" />
<Link relative="path" />
Consider a route hierarchy where a parent route pattern is "blog" and a child route pattern is "blog/:slug/edit".
".."
will remove both :slug/edit
segments back to "/blog"...
will only remove one URL segment up to "/blog/:slug"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>
).
<Link to="/logout" reloadDocument />
Replaces the current entry in the history stack instead of pushing a new one onto it.
<Link replace />
# with a history stack like this
A -> B
# normal link click pushes a new entry
A -> B -> C
# but with `replace`, B is replaced by C
A -> C
Adds persistent client side routing state to the next location.
<Link to="/somewhere/else" state={{ some: "value" }} />
The location state is accessed from the location
.
function SomeComp() {
const location = useLocation();
location.state; // { some: "value" }
}
This state is inaccessible on the server as it is implemented on top of history.state
Regular React style object or a function that receives an object with the active and pending states of the link.
<NavLink to="/tasks" style={{ color: "red" }} />
<NavLink to="/tasks" style={({ isActive, isPending }) => ({
color:
isActive ? "red" :
isPending ? "blue" : "black"
})} />
Note that pending
is only available with Framework and Data modes.
Can be a string or a partial Path:
<Link to="/some/path" />
<Link
to={{
pathname: "/some/path",
search: "?query=string",
hash: "#hash",
}}
/>
Enables a View Transition for this navigation.
<Link to={to} viewTransition>
Click me
</Link>
To apply specific styles for the transition, see useViewTransitionState