You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A `<NavLink>` is a special kind of `<Link>` that knows whether or not it is "active" or "pending". This is useful when building a navigation menu, such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
A `<NavLink>` is a special kind of [`<Link>`][link] that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected. It also provides useful context for assistive technology like screen readers.
22
+
## Default `active` class
41
23
42
-
By default, an `active` class is added to a `<NavLink>` component when it is active. This provides the same simple styling mechanism for most users who are upgrading from v5. One difference as of `v6.0.0-beta.3` is that `activeClassName` and `activeStyle` have been removed from `NavLinkProps`. Instead, you can pass a function to either `style` or `className` that will allow you to customize the inline styling or the class string based on the component's active state. You can also pass a function as children to customize the content of the `<NavLink>` component based on their active state, specially useful to change styles on internal elements.
24
+
By default, an `active` class is added to a `<NavLink>` component when it is active so you can use CSS to style it.
43
25
44
26
```tsx
45
-
import*asReactfrom"react";
46
-
import { NavLink } from"react-router-dom";
27
+
<navid="sidebar">
28
+
<NavLinkto="/messages" />
29
+
</nav>
30
+
```
47
31
48
-
function NavList() {
49
-
// This styling will be applied to a <NavLink> when the
50
-
// route that it links to is currently selected.
51
-
let activeStyle = {
52
-
textDecoration: "underline",
53
-
};
54
-
55
-
let activeClassName ="underline";
56
-
57
-
return (
58
-
<nav>
59
-
<ul>
60
-
<li>
61
-
<NavLink
62
-
to="messages"
63
-
style={({ isActive }) =>
64
-
isActive?activeStyle:undefined
65
-
}
66
-
>
67
-
Messages
68
-
</NavLink>
69
-
</li>
70
-
<li>
71
-
<NavLink
72
-
to="tasks"
73
-
className={({ isActive }) =>
74
-
isActive?activeClassName:undefined
75
-
}
76
-
>
77
-
Tasks
78
-
</NavLink>
79
-
</li>
80
-
<li>
81
-
<NavLinkto="tasks">
82
-
{({ isActive }) => (
83
-
<span
84
-
className={
85
-
isActive?activeClassName:undefined
86
-
}
87
-
>
88
-
Tasks
89
-
</span>
90
-
)}
91
-
</NavLink>
92
-
</li>
93
-
</ul>
94
-
</nav>
95
-
);
32
+
```css
33
+
#sidebara.active {
34
+
color: red;
96
35
}
97
36
```
98
37
99
-
If you prefer the v5 API, you can create your own `<NavLink />` as a wrapper component:
38
+
## `className`
39
+
40
+
The `className` prop works like a normal className, but you can also pass it a function to customize the classNames applied based on the active and pending state of the link.
The `style` prop works like a normal style prop, but you can also pass it a function to customize the styles applied based on the active and pending state of the link.
56
+
57
+
```tsx
58
+
<NavLink
59
+
to="/messages"
60
+
style={({ isActive, isPending }) => {
61
+
return {
62
+
fontWeight: isActive?"bold":"",
63
+
color: isPending?"red":"black",
64
+
};
65
+
}}
66
+
>
67
+
Messages
68
+
</NavLink>
69
+
```
70
+
71
+
## `children`
72
+
73
+
You can pass a render prop as children to customize the content of the `<NavLink>` based on the active and pending state, which is useful to change styles on internal elements.
If the `end` prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs, you can use:
83
+
## `end`
84
+
85
+
The `end` prop changes the matching logic for the `active` and `pending` states to only match to the "end" of the NavLinks's `to` path. If the URL is longer than `to`, it will no longer be considered active.
86
+
87
+
Without the end prop, this link is always active because every URL matches `/`.
88
+
89
+
```tsx
90
+
<NavLinkto="/">Home</NavLink>
91
+
```
92
+
93
+
To match the URL "to the end" of `to`, use `end`:
130
94
131
95
```tsx
132
96
<NavLinkto="/"end>
133
97
Home
134
98
</NavLink>
135
99
```
136
100
137
-
[link]: ./link
101
+
Now this link will only be active at `"/"`. This works for paths with more segments as well:
When a `NavLink` is active it will automatically apply `<a aria-current="page">` to the underlying anchor tag. See [aria-current][aria-current] on MDN.
0 commit comments