From 2bef30c3f441edad2b82ae635c8a02dabfb5a876 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Tue, 2 Apr 2024 11:49:43 +0200 Subject: [PATCH] docs(router): NavLink wording improvements (#10380) Co-authored-by: Dominic Saadi --- docs/docs/router.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/docs/router.md b/docs/docs/router.md index d5f5d2d1c9db..7d1e9a715032 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=*