T
TanStack•2y ago
conscious-sapphire

ActiveOptions matcher fn

https://tanstack.com/router/latest/docs/framework/react/guide/navigation#active-options Would it be possible to have a matcher function for the ActiveOptions?
I have an invoices route in my sidebar with additional options to filter the invoice by status. When I search the invoices, the 'search' searchParam is updated which removes the active state on route. I can inject the 'search' searchParam into the link, however this flashes the active state as the route is loading. Additionally, this means the link keeps the 'search' state which is not always the desired behaviour. Would something like this be a viable option to add to the ActiveOptions? 
<Link
    activeOptions={{
      // Add a matcher function to set the active state based on a               partial match of the searchParams
      matcher: ({search}) => {
        return search.invoiceStatus === InvoiceStatus.Draft
      }
    }}
...
<Link
    activeOptions={{
      // Add a matcher function to set the active state based on a               partial match of the searchParams
      matcher: ({search}) => {
        return search.invoiceStatus === InvoiceStatus.Draft
      }
    }}
...
Navigation | TanStack Router React Docs
Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?