嵌套路由NavLink激活状态异常问题求助

我希望嵌套路由的标签在首次展示时处于激活状态，但现在只有点击后才会激活；如果调整配置让标签初始激活，左侧导航的父路由又会在切换子标签时变成未激活状态。

当前相关代码配置如下：

App.js（路由配置） #

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

把profile设为index路由，是为了让用户从左侧导航进入/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>

这个组件用来展示嵌套路由的切换器。

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>

已尝试的方案 #

• 将LeftNav.js中NavLink的to属性改为account/profile，此时Profile标签初始会激活，但点击API Key标签后，左侧导航的父路由会变成未激活状态。

这里提供几种可行的解决思路，根据你的需求选择：

方法1：自定义内部标签的激活判断逻辑 #

针对NavAccount里的Profile标签，手动扩展激活条件，当当前路径是/account（index路由）或/account/profile时，都标记为激活状态：

使用React Router的useMatch钩子做精准判断（推荐）：

import { useMatch, NavLink, Outlet } from 'react-router-dom';

const NavAccount = () => {
  // 匹配index路由和profile路由
  const isIndexRoute = useMatch('/account');
  const isProfileRoute = useMatch('/account/profile');

  return (
    <div>
      <div>
        <ul className="nav nav-tabs" role="tablist">
          <li className="nav-item">
            <NavLink
              to='profile'
              className={`nav-link ${isIndexRoute || isProfileRoute ? 'active' : ''}`}
              id='profileTab'
              data-bs-toggle="pill"
            >
              <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>
  );
};

export default NavAccount;

方法2：调整路由结构，重定向index路由 #

移除重复的Profile路由配置，把/account的index路由重定向到/account/profile，这样初始加载时就会进入明确的子路由，标签自动激活，同时父路由也会保持激活：

修改App.js的路由：

import { Navigate } from 'react-router-dom';

<Route path="account" element={<Account />}>
  <Route path="profile" element={<Profile />} />
  <Route path="key" element={<Key />} />
  {/* 重定向index路由到profile */}
  <Route index element={<Navigate to="profile" replace />} />
</Route>

这种方式不需要修改任何导航组件的代码，逻辑更清晰，同时解决了初始标签不激活和父路由失活的问题。

方法3：让左侧导航父路由保持激活 #

给左侧导航的NavLink添加end={false}属性，关闭精确匹配，这样当子路由激活时，父路由依然会被标记为激活：

修改LeftNav.js：

<NavLink to='account/profile' className="nav-link" activeClassName="active" end={false}>
  <span>Account</span>
</NavLink>

这种方式下，初始进入/account/profile时Profile标签激活，切换到/account/key时，父路由/account依然匹配，左侧导航保持激活状态。

内容的提问来源于stack exchange，提问作者ksernow