diff --git a/docs/docs/router.md b/docs/docs/router.md index d3002d056389..6f430533e2be 100644 --- a/docs/docs/router.md +++ b/docs/docs/router.md @@ -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' @@ -227,7 +227,7 @@ import { NavLink, routes } from '@redwoodjs/router' const MainMenu = () => ``` -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 when on any of Home tutorial pages +// Will render when on any Home tutorial page const MainMenu = () => (
  • ( > Note `activeMatchParams` is an array of `string` _(key only)_ or `Record` _(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=*