Strange behavior with NavLink and index

[stephanedupont]

Hello,

I'm encountering a strange behavior, but maybe there's something I'm not seeing or doing wrong, so I thought that it would be better to create a discussion first instead of an issue.

I have a main menu with a link to a settings route:

...
<li><NavLink to="/settings/">Settings</NavLink></li>
...

This page has a secondary menu with 3 settings sections, let's say "Common", "A" and "B", corresponding to these routes:

/settings
/settings/A
/settings/B

This secondary menu is like this:

<li><NavLink to="/settings/">Settings</NavLink></li>
<li><NavLink to="/settings/A">Settings</NavLink></li>
<li><NavLink to="/settings/B">Settings</NavLink></li>

... and the routes are defined like this:

<Route path="/settings/" element={<SettingsLayout />}>

  <Route index element={<CommonSettingsRoute />} />
  <Route path="/settings/A" element={<ASettingsRoute />} />
  <Route path="/settings/B" element={<BSettingsRoute />} />

</Route>

Now, the problem:

• If I go to "/settings", the CommonSettingsRoute content is displayed, the main menu navlink has an active class added, but the secondary menu doesn't

• If I go to "/settings/", then everything works fine, the CommonSettingsRoute content is displayed, the main menu navlink has an active class added, and the secondary menu also does (as expected)

• If I go to "/settings/A", then it also works as expected, both menu items are active ("settings" in the main menu, and "A" in the secondary menu).

To try to fix this (fix the fact that in /settings the main menu is not active), I changed the main menu link to this:

<li><NavLink to="/settings">Settings</NavLink></li>

By doing this, I have the following result:

• If I go to "/settings", the CommonSettingsRoute content is displayed, but none of the menu are active.

• If I go to "/settings/", then everything works fine, the CommonSettingsRoute content is displayed, the main menu navlink has an active class added, and the secondary menu also does (as expected)

• If I go to "/settings/A", then the main menu item is no longer active

Is there something that I'm doing wrong here? Or is it a bug?

[stephanedupont]

I believe that in NavLink.ts the following lines should be added:

    locationPathname = normalizePathname(locationPathname);
    toPathname = normalizePathname(toPathname);

... so that it looks like this:

    ...

    let locationPathname = location.pathname;
    let toPathname = path.pathname;
    if (!caseSensitive) {
      locationPathname = locationPathname.toLowerCase();
      toPathname = toPathname.toLowerCase();
    }

    locationPathname = normalizePathname(locationPathname);
    toPathname = normalizePathname(toPathname);

    let isActive =
      locationPathname === toPathname ||
      (!end &&
        locationPathname.startsWith(toPathname) &&
        locationPathname.charAt(toPathname.length) === "/");

    ...

Shall I make a PR?