Skip to content

Commit 3d985bf

Browse files
committed
Merge pull request #3126 from chrisbolin/patch-1
Add docs for the Link prop `onlyActiveOnIndex`
2 parents e02c08a + f3f2171 commit 3d985bf

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

docs/API.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ Please see the [`examples/`](/examples) directory of the repository for extensiv
103103
### `<Link>`
104104
The primary way to allow users to navigate around your application. `<Link>` will render a fully accessible anchor tag with the proper href.
105105

106-
A `<Link>` can know when the route it links to is active and automatically apply an `activeClassName` and/or `activeStyle` when given either prop. The `<Link>` will be active if the current route is either the linked route or any descendant of the linked route. To have the link be active only on the exact linked route, use [`<IndexLink>`](#indexlink) instead.
106+
A `<Link>` can know when the route it links to is active and automatically apply an `activeClassName` and/or `activeStyle` when given either prop. The `<Link>` will be active if the current route is either the linked route or any descendant of the linked route. To have the link be active only on the exact linked route, use [`<IndexLink>`](#indexlink) instead or set the `onlyActiveOnIndex` prop.
107107

108108
#### Props
109109
##### `to`
@@ -129,6 +129,9 @@ The styles to apply to the link element when its route is active.
129129
##### `onClick(e)`
130130
A custom handler for the click event. Works just like a handler on an `<a>` tag - calling `e.preventDefault()` will prevent the transition from firing, while `e.stopPropagation()` will prevent the event from bubbling.
131131

132+
##### `onlyActiveOnIndex`
133+
If `true`, the `<Link>` will only be active when the current route exactly matches the linked route.
134+
132135
##### *others*
133136
You can also pass props you'd like to be on the `<a>` such as a `title`, `id`, `className`, etc.
134137

@@ -150,7 +153,7 @@ Given a route like `<Route path="/users/:userId" />`:
150153
```
151154

152155
### `<IndexLink>`
153-
An `<IndexLink>` is like a [`<Link>`](#link), except it is only active when the current route is exactly the linked route.
156+
An `<IndexLink>` is like a [`<Link>`](#link), except it is only active when the current route is exactly the linked route. It is equivalent to `<Link>` with the `onlyActiveOnIndex` prop set.
154157

155158
### `<RouterContext>`
156159
A `<RouterContext>` renders the component tree for a given router state. Its used by `<Router>` but also useful for server rendering and integrating in brownfield development.

0 commit comments

Comments
 (0)