Javascript NavLink Active 不适用于嵌套路由

我正在try 使我的嵌套路由选项卡在第一次显示时处于活动状态，但除非单击，否则它不会变为活动状态.如果我更改了任何内容，父路由将变为非活动状态.

App.js

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

我之所以将配置文件作为索引，是因为我希望当用户从左侧导航到"/account"时，该选项卡作为默认选项卡打开.

LeftNav.js

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

默认情况下，配置文件组件是加载的，这很好，但我有另一个选项卡可以在配置文件和键之间切换，这就是配置文件不突出显示/激活的地方.

Account.js

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

Js是为用户显示嵌套路由交换器的页面.

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>

正如您在下面看到的，配置文件选项卡第一次显示时，直到单击它才处于活动状态.

我try 过的事情:

• 我将LeftNav.js中的Navlink改为to='account/profile'，但当我点击API Key选项卡时，父路由(在左侧导航中)变为非活动状态.