Router: isCurrent should be slightly forgiving

[benwiley4000]

Feature Request

I think the isCurrent prop available in getProps for the Link component is useful, but it's too bad that it only does a strict equality comparison. This means that if my Link's to prop is /users and the current location.pathname is /users/, then isCurrent is false. Ideally, /users/ would match /users.

There's also isPartiallyCurrent, but that would mean that / would also match, which is undesirable for this situation.

I can implement the logic myself, but is there a reason that isn't the default behavior?

[chrishelgert]

Had also the same problem with /users?page=3
By clientside rendering everything works, but on serverside rendering is a mismatch :(

[Romcol]

Hi,

I'm also having this issue.

I'm unable to match a base path such as this <Link to="./">Dashboard Home</Link> with isCurrent because of the trailing slash.

/frworks, /fr/ doesn't. Any way to fix this ?

Cheers,

[rockchalkwushock]

We ran into this issue this morning where when a user would login and be redirected to the app the current url was not triggering that <Link/> to show in an active state. We were making use of the isCurrent & isPartiallyCurrent properties to set the className. I figured there must be equality checking happening under the hood and found this ticket. Came up with a simple hack that is working for us:

<Nav.Link
    to="meetings"
    as={ProfileLink}
    getProps={(props: LinkGetProps) => {
    // On initial page load when logging in isCurrent & isPartiallyCurrent
    // evaluate to false because the equality check does not match.
    // i.e. /meetings !== /profiles/{id}/meetings
    // To hack our way around this we inspect the location.pathname and use it as a short circuit.
    const isOnMeetingsPage = props.location.pathname.includes('meetings')
    return { className: `nav-link ${props.isPartiallyCurrent || isOnMeetingsPage ? 'current'  : '' }`}
     }}
     >
  My Meetings
</Nav.Link>
````

This can actually be solved by using `<Match />` as well:

```tsx
<Match path="meetings">
  {({ location }) => (
     <Nav.Link
         to="meetings"
         as={ProfileLink}
         getProps={(props: LinkGetProps) => ({
            className: `nav-link ${location.pathname === props.href ? 'current' : ''}`})
         }
     >
       <Icon.Inbox size="18" />
        My Meetings
     </Nav.Link>
  )}
 </Match>

Perhaps this will help others 😄

[duyphanz]

props.href from getProps will not include the ending slash. In case you're using window.location.pathname, just make sure your pathname does not include the ending slash as well 😃