Skip to content

Active class not applied on RouterLink when using to with string or object with path key #2419

Open
@alizadeh118

Description

Reproduction

https://stackblitz.com/edit/vitejs-vite-a1m7gbnq

Steps to reproduce the bug

  1. Open the reproduction link
  2. Click on third item (Go to Feature one)
  3. Check the active classes applied to the first and second links.

Expected behavior

The RouterLink component with the /features value is expected to have the active class (router-link-active) applied when the current route is /features/one, regardless of how the to prop value is provided.

Actual behavior

The active class (router-link-active) is applied only when the to prop is passed with a route name. However, for another RouterLink where the to prop is provided as a string, the active class is not applied.

Additional information

There is another difference between these two RouterLink components, though I'm not sure if it's a bug:

<RouterLink :to="{ name: 'features' }">
<RouterLink to="/features">

Clicking only on the second link causes the $route.params to include a pathMatch key.
You can verify this by clicking on the first two links in the reproduction link.

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghas workaroundA workaround has been found to deal with the issue

    Type

    No type

    Projects

    • Status

      🆕 Triaging

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions