React中如何修改点击元素下一个兄弟节点的className？点击后报错无法切换

核心错误原因 #

你遇到的Cannot read properties of undefined (reading 'pathname')是关键问题：React Router的<Link>组件点击时默认会执行页面导航逻辑，但你的父级<Link>没有指定to属性，且未阻止默认行为，导致导航逻辑执行时找不到路由相关上下文，抛出错误。同时直接操作DOM的方式不符合React状态管理模式，容易引发UI与状态不一致的问题。

另外两个错误：

• Uncaught ReferenceError: process is not defined：通常是浏览器环境中缺少process全局变量，属于环境配置问题。
• 源映射加载失败：是浏览器扩展的无关错误，可直接忽略。

修复方案 #

1. 临时修复：阻止Link默认导航行为

如果暂时想保留直接操作DOM的方式，必须在onClick中阻止Link的默认导航逻辑：

<li>
  <Link onClick={(event) => {
    // 阻止默认导航行为
    event.preventDefault();
    event.currentTarget.nextElementSibling.classList.toggle("show");
  }}>Nav Item A</Link>
  <ul className='submenu'>
    {/* 子菜单内容 */}
  </ul>
</li>

2. 推荐方案：用React状态管理子菜单

React中应通过状态控制UI，而非直接操作DOM，避免状态不一致问题：

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

function NavMenu() {
  // 用状态管理每个子菜单的显示状态
  const [showSubmenuA, setShowSubmenuA] = useState(false);
  const [showSubmenuB, setShowSubmenuB] = useState(false);

  const closeMenu = () => {
    setShowSubmenuA(false);
    setShowSubmenuB(false);
  };

  return (
    <ul>
      <li>
        <Link 
          onClick={(e) => {
            e.preventDefault();
            setShowSubmenuA(!showSubmenuA);
          }}
        >
          Nav Item A
        </Link>
        {/* 根据状态动态添加类名 */}
        <ul className={`submenu ${showSubmenuA ? 'show' : ''}`}>
          <li>
            <Link to="#0" onClick={closeMenu}>Submenu Item 1</Link>
          </li>
          <li>
            <Link to="#0" onClick={closeMenu}>Submenu Item 2</Link>
          </li>
        </ul>
      </li>

      <li>
        <Link 
          onClick={(e) => {
            e.preventDefault();
            setShowSubmenuB(!showSubmenuB);
          }}
        >
          Nav Item B
        </Link>
        <ul className={`submenu ${showSubmenuB ? 'show' : ''}`}>
          <li>
            <Link to="#0" onClick={closeMenu}>Submenu Item 3</Link>
          </li>
          <li>
            <Link to="#0" onClick={closeMenu}>Submenu Item 4</Link>
          </li>
        </ul>
      </li>
    </ul>
  );
}

export default NavMenu;

3. 解决process is not defined问题

• 若使用Vite，在vite.config.js中添加全局变量配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': {}
  }
});

• 若使用Webpack，在webpack.config.js中添加：

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  ]
};

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