如何在点击其他链接时保持React中NavLink的激活状态？

根据你的需求，有两种实用的实现方式，可根据场景选择：

方式一：强制NavLink始终激活 #

如果不需要区分是否点击过，仅希望特定NavLink一直显示激活样式，可自定义isActive函数让它始终返回true，配合激活类名判断即可：

const LeftMenu = () => {
  return (
    <div className="side-navbar active-nav d-flex justify-content-between flex-wrap flex-column">
      <div>
        <ul className="btn-toggle-nav list-unstyled fw-normal small">
          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink 
                to={companyShares} 
                className={({ isActive }) => `dropdown-nav-link px-3 ${isActive ? 'active' : ''}`}
                isActive={() => true}
              >
                COMPANY SHARES
              </NavLink>
            </span>
          </li>

          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink 
                to={companyTech} 
                className={({ isActive }) => `dropdown-nav-link px-3 ${isActive ? 'active' : ''}`}
                isActive={() => true}
              >
                COMPANY TECH
              </NavLink>
            </span>
          </li>
        </ul>
      </div>
    </div>
  );
};

方式二：记录点击状态保持激活 #

如果需要点击某个NavLink后，即使跳转到其他页面也保留激活状态，可通过状态记录激活项：

单组件场景（内部状态） #

import { useState } from 'react';
import { NavLink } from 'react-router-dom';

const LeftMenu = () => {
  // 记录当前激活的链接标识
  const [activeKey, setActiveKey] = useState('');

  return (
    <div className="side-navbar active-nav d-flex justify-content-between flex-wrap flex-column">
      <div>
        <ul className="btn-toggle-nav list-unstyled fw-normal small">
          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink 
                to={companyShares} 
                className={`dropdown-nav-link px-3 ${activeKey === 'shares' ? 'active' : ''}`}
                onClick={() => setActiveKey('shares')}
              >
                COMPANY SHARES
              </NavLink>
            </span>
          </li>

          <li className="nav-item-dropdown">
            <span className="mx-3">
              <NavLink 
                to={companyTech} 
                className={`dropdown-nav-link px-3 ${activeKey === 'tech' ? 'active' : ''}`}
                onClick={() => setActiveKey('tech')}
              >
                COMPANY TECH
              </NavLink>
            </span>
          </li>
        </ul>
      </div>
    </div>
  );
};

跨组件场景（全局状态） #

如果跳转其他页面后仍需保留激活状态，可使用React Context或Redux等状态管理工具存储activeKey，确保状态全局生效。

另外，请使用用户名和密码test完成登录操作。

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