NavLink Active not working for nested routes

Question

I am trying to make my nested route tab active when first displayed but it does not become active unless clicked. If I change anything the parent route becomes inactive.

App.js

<Route path="account" element={<Account />}>
  <Route index element={<Profile />} />
  <Route path="profile" element={<Profile />} />
  <Route path="key" element={<Key />} />
</Route>

The reason I have profile as index is because I want that tab to be open as default when user navigates to "/account" from the left nav.

LeftNav.js

<NavLink to='account' className="nav-link" activeClassName="active">
  <span>Account</span>
</NavLink

By default the profile component is loaded which is great but I have another tab inside to switch between profile and key and that is where the profile is not highlighted/active.

Account.js

<div>
  <Header title="Account" />
  <div>
    <NavAccount />
  </div>
</div>

Account.js is the page that displays the nested routes swticher for the user.

NavAccount.js

<div>
  <div>
    <ul className="nav nav-tabs" role="tablist">
      <li className="nav-item">
        <NavLink
          to='profile'
          className="nav-link"
          id='profileTab'
          data-bs-toggle="pill"
          activeclassname="active"
        >
          <span>Profile</span>
        </NavLink>
      </li>
      <li className="nav-item">
        <NavLink
          to='key'
          className="nav-link"
          id='apiKeyTab'
          data-bs-toggle="pill"
          activeclassname="active"
        >
          <span>API Key</span>
        </NavLink>
      </li>
    </ul>
  </div>  
  <Outlet />
</div>

As you can see below, the profile tab when first displayed it not active until clicked.

Things I tried:

• I changed the Navlink in LeftNav.js to point to to='account/profile' which worked, but I when I clicked on API key tab, the parent route (in the left nav) became inactive.

Answer 1

I am trying to make my nested route tab active when first displayed but it does not become active unless clicked.

From what I understand of this and the code it seems you would like to make the "/account/profile" route a "default" route such that when navigating to "/account" via the left-nav that the Profile page will be "active". For this you can render a redirect to "/account/profile" on the "/account" index route.

• The "/account" link in LeftNav will be active for being on any "/account/*" path
• The "/account/profile" link in NavAccount will be active for being the currently matched path.

<Route path="account" element={<Account />}>
  <Route index element={<Navigate to="profile" replace />} />
  <Route path="profile" element={<Profile />} />
  <Route path="key" element={<Key />} />
</Route>

Also just FYI, the react-router-dom@6 NavLink component hasn't any activeClassName prop, it was removed. The RRDv6 NavLink applies an "active" CSS classname by default for the matched route.

<NavLink to='account' className="nav-link">
  <span>Account</span>
</NavLink>

If you wanted to use a different CSS classname for the active class then use the function callback form of the className prop.

<NavLink
  to='account'
  className={({ isActive }) => 
    ["nav-link", isActive ? "active-nav-link" : null]
      .filter(Boolean)
      .join(" ")
  }
>
  <span>Account</span>
</NavLink>