Skip to content

Commit

Permalink
docs(router): NavLink wording improvements (#10380)
Browse files Browse the repository at this point in the history
Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>
  • Loading branch information
Tobbe and jtoar authored Apr 2, 2024
1 parent 5c146f7 commit 2bef30c
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions docs/docs/router.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ Named route functions simply return a string, so you can still pass in hardcoded

## Active links

`NavLink` is a special version of `Link` that will add an `activeClassName` to the rendered element when it matches **exactly** the current URL.
`NavLink` is a special version of `Link` that will add an `activeClassName` to the rendered element when it matches the current URL.

```jsx title="MainMenu.jsx"
import { NavLink, routes } from '@redwoodjs/router'
Expand All @@ -227,7 +227,7 @@ import { NavLink, routes } from '@redwoodjs/router'
const MainMenu = () =>
<ul>
<li>
<!-- When match "/" -->
<!-- Adds "activeLink" when the URL matches "/" -->
<NavLink
className="link"
activeClassName="activeLink"
Expand All @@ -236,7 +236,8 @@ const MainMenu = () =>
</NavLink>
</li>
<li>
<!-- When match "/?tab=tutorial" (params order insensitive) -->
<!-- Adds "activeLink" when the URL matches "/?tab=tutorial" -->
<!-- (params order insensitive) -->
<NavLink
className="link"
activeClassName="activeLink"
Expand All @@ -247,12 +248,12 @@ const MainMenu = () =>
</ul>
```

Alternatively, you can add the `activeMatchParams` prop to your `NavLink` to match the current URL **partially**
The `activeMatchParams` prop can be used to control how query params are matched:

```jsx
import { NavLink, routes } from '@redwoodjs/router'

// Will render <a href="/?tab=tutorial&page=2" className="link activeLink"> when on any of Home tutorial pages
// Will render <a href="/?tab=tutorial&page=2" className="link activeLink"> when on any Home tutorial page
const MainMenu = () => (
<li>
<NavLink
Expand All @@ -269,7 +270,7 @@ const MainMenu = () => (

> Note `activeMatchParams` is an array of `string` _(key only)_ or `Record<string, any>` _(key and value)_
More granular match, `page` key only and `tab=tutorial`
More granular match; needs to be on the tutorial tab (`tab=tutorial`) and have the `page` key specified:

```jsx
// Match /?tab=tutorial&page=*
Expand Down

0 comments on commit 2bef30c

Please sign in to comment.