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.
Copy file name to clipboardExpand all lines: docs/guides/deferred.md
+37Lines changed: 37 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -207,6 +207,43 @@ When you decide you'd like to try the trade-offs of `defer`, we don't want you t
207
207
208
208
So just keep this in mind: **Deferred is 100% only about the initial load of a route and its params.**
209
209
210
+
### Why don't Response objects returned by the loader work anymore?
211
+
212
+
When you use `defer`, you're telling React Router to load the page immediately, without the deferred data. The page is already loaded before the `Response` object is returned so responses are not automatically processed in the same way as if you had done `returnfetch(url)`.
213
+
214
+
Therefore, you will need to handle your own `Response` processing and resolve your deferred Promise with data, not a `Response` instance.
215
+
216
+
```jsx
217
+
asyncfunctionloader({ request, params }) {
218
+
returndefer({
219
+
// Broken! Resolves with a Response
220
+
// broken: fetch(url),
221
+
222
+
// Fixed! Resolves with the response data
223
+
data:fetch(url).then((res) =>res.json()),
224
+
});
225
+
}
226
+
```
227
+
228
+
Or consider the scenario where our deferred data could return a redirect `Response`. You can detect the redirect and send the status code and location back as data, and then you could perform a client-side redirect in your component via `useEffect` and `useNavigate`.
Copy file name to clipboardExpand all lines: docs/routers/create-memory-router.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ new: true
5
5
6
6
# `createMemoryRouter`
7
7
8
-
Instead of using the browsers history a memory router manages it's own history stack in memory. It's primarily useful for testing and component development tools like Storybook, but can also be used for running React Router in any non-browser environment.
8
+
Instead of using the browser's history, a memory router manages its own history stack in memory. It's primarily useful for testing and component development tools like Storybook, but can also be used for running React Router in any non-browser environment.
Copy file name to clipboardExpand all lines: docs/start/concepts.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -664,6 +664,10 @@ And the resulting element tree rendered will be:
664
664
</PageLayout>
665
665
```
666
666
667
+
<docs-warning>
668
+
Don't forget to add an `<Outlet>` to your layout where you would like child route elements to be rendered. Using `children` will not work as expected.
669
+
</docs-warning>
670
+
667
671
The `PageLayout` route is admittedly weird. We call it a [layout route](#layout-route) because it doesn't participate in the matching at all (though its children do). It only exists to make wrapping multiple child routes in the same layout simpler. If we didn't allow this then you'd have to handle layouts in two different ways: sometimes your routes do it for you, sometimes you do it manually with lots of layout component repetition throughout your app:
668
672
669
673
<docs-error>You can do it like this, but we recommend using a layout route</docs-error>
@@ -1790,7 +1790,7 @@ There is one key difference though, it's not a navigation--the URL doesn't chang
1790
1790
1791
1791
## Optimistic UI
1792
1792
1793
-
You probably noticed the app felt kind of unresponsive when we clicked the the favorite button from the last section. Once again, we added some network latency because you're going to have it in the real world!
1793
+
You probably noticed the app felt kind of unresponsive when we clicked the favorite button from the last section. Once again, we added some network latency because you're going to have it in the real world!
1794
1794
1795
1795
To give the user some feedback, we could put the star into a loading state with [`fetcher.state`][fetcherstate] (a lot like `navigation.state` from before), but we can do something even better this time. We can use a strategy called "optimistic UI"
0 commit comments