diff --git a/docs/docs/router.md b/docs/docs/router.md index 7d1e9a715032..0cea8e101879 100644 --- a/docs/docs/router.md +++ b/docs/docs/router.md @@ -218,26 +218,34 @@ 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 the current URL. +`NavLink` is a special version of `Link` that will switch to the +`activeClassName` classes for the rendered element when it matches the current +URL. ```jsx title="MainMenu.jsx" import { NavLink, routes } from '@redwoodjs/router' -// Will render respectively when on the page const MainMenu = () => ``` -The `activeMatchParams` prop can be used to control how query params are matched: +The `activeMatchParams` prop can be used to control how query params are +matched: ```jsx import { NavLink, routes } from '@redwoodjs/router' -// Will render when on any Home tutorial page +// Will render when on +// any Home tutorial page const MainMenu = () => (
  • ( ) ``` -> Note `activeMatchParams` is an array of `string` _(key only)_ or `Record` _(key and value)_ +> Note `activeMatchParams` is an array of `string` _(key only)_ or +> `Record` _(key and value)_ -More granular match; needs to be on the tutorial tab (`tab=tutorial`) and have the `page` key specified: +More granular match; needs to be on the tutorial tab (`tab=tutorial`) and have +the `page` key specified: ```jsx // Match /?tab=tutorial&page=*