Link activeOptions exact should ignore trailing slash?

[hansyulian]

Hi.

So i have the following piece of code:

            <NavLink
              classNames={{ root: classes["link-sub-group__item"] }}
              label="Manage Cars"
              to="/inventory/vehicle"
              component={Link}
              activeOptions={{ exact: true }}
            />
            <NavLink
              classNames={{ root: classes["link-sub-group__item"] }}
              label="Add Car"
              to="/inventory/vehicle/new"
              component={Link}
            />

and i have an issue where the url path is /inventory/vehicle/, it doesn't match to the /inventory/vehicle due to the path test in

router/packages/react-router/src/link.tsx

Line 429 in 876b887

const pathTest = activeOptions?.exact

is using s.location.pathname === next.pathname, which will fail when due to the trailing slash.

Right now the solution is just to add / on the to and it will be kinda fixed.

Shouldn't the matching at least trim the trailing slashes?

[SeanCassiere]

@hansyulian is your issue here similar to #1309?
If so, could you please add your thoughts from here, onto that open issue?

[hansyulian]

@SeanCassiere actually it's different. so his issue is there is additional trailing slash added, while my issue is the trailing slash shouldn't fail the activeOptions.exact, In a way both of these are linked, but I would imagine that that issue will be solved in different pull request with this if any

[SeanCassiere]

@hansyulian yup good stuff.

Could we move this into an issue since this looks to be a bug? (please add a reproduction)

Or if you have the bandwidth you could pull-up a PR and get it reviewed and merged.

[SeanCassiere]

Fixed by @hansyulian in #1372 and published in release 1.22.9.

[mudasirpandith]

I am getting the same issue in v1.28.1 @SeanCassiere

[SeanCassiere]

I retested this and observed no issues.

@mudasirpandith retest your problem with the latest version.
If the issue still persists, open a new issue on Github with a minimal reproduction of the issue you are facing.

You can create a minimal reproduction using the Router file-based stackblitz starter.