Correct usage of nested Links, to keep active state of parent

[mkascel]

I have a nav/subnav structure set up where I'm using an app-wide navigation with Links and on one page, I have a sub-nav of other Links. The problem is that as I navigate through the submenu, the "parent's" (app-wide) active state gets lost, because I'm expecting it to act in a greedy way when determining whether it's link is active. What is the correct way to achieve what I'm trying to do below?

Parent link in app-wide nav <Link href="/home/me" activeProps={{ className: 'active' }}>{'Home'}</Link>

Sublinks in page-nav

<Link href="/home/me" activeProps={{ className: 'active' }}>{'Me'}</Link>
<Link href="/home/me/about" activeProps={{ className: 'active' }}>{'About'}</Link>
<Link href="/home/me/other" activeProps={{ className: 'active' }}>{'Other'}</Link>

The routes I have defined for this are:

  '/home/:homeId': {
    '/:sectionName': {},
  },

The "me" parts of the path above will eventually be dynamic.

Thanks in advance!

[mkascel]

Looking at the Link source, it doesn't seem this is actually supported currently; there's just a simple equality comparison between the current browser pathname and the Link instance's defined path to determine whether something is active or not.

To support this it looks like it would be necessary to inspect result.parent as well, is this a feature you'd be interested in adding? What would the best API for that be, a boolean passed to Link or something else?

[mkascel]

Perhaps it could be a prop similar to Fragment to unify the API a bit, activeForRoute?

For anyone else who comes across this, for now I am managing this manually by connecting this particular Link instance to the redux store as mentioned here and managing className="active" based on a String.prototype.includes check