React路由集成后导航栏跳转与暗黑模式切换失效问题求助

看起来你在把原本的单页锚点导航升级成React Router多页面布局时，遇到了两个棘手的问题：导航链接点击后没反应，暗黑/亮色模式切换也失效了。我帮你排查了代码里的问题，整理了修复方案：

一、导航跳转失效的原因与修复 #

你的导航点击没反应，核心问题出在handleClick函数里的e.preventDefault()——它直接阻止了React Router Link组件的默认跳转行为，导致点击链接只会执行原本的锚点滚动逻辑，而不会触发路由跳转。而且现在是多页面场景，原本的锚点滚动逻辑（通过document.querySelector获取元素位置）也不再适用，因为其他页面的元素在当前页面根本不存在。

修复步骤： #

1. 移除冲突的点击事件：如果你的导航都是跨页面路由，直接去掉CustomLink上的onClick={handleClick}即可，让Link组件正常执行跳转：

{nav__links.map((item, index) => (
  <li className="menu__item" key={index}>
    <CustomLink
      to={item.to}
      className="menu__link"
    >
      {item.display}
    </CustomLink>
  </li>
))}

2. 规范路由路径：给路由路径加上前置斜杠，避免相对路径匹配出错：

const nav__links = [
  {
    to: "/home",
    display: "Home",
  },
  {
    to: "/service",
    display: "Service",
  },
  {
    to: "/preise",
    display: "Preise",
  },
  {
    to: "/kontakt",
    display: "Kontakt",
  },
];

3. 如果需要保留单页锚点滚动：如果部分页面仍需要锚点跳转，可以修改handleClick，只对锚点链接（以#开头）执行滚动逻辑，其他情况让Link正常跳转：

const handleClick = (e, to) => {
  if (to.startsWith('#')) {
    e.preventDefault();
    const location = document.querySelector(to).offsetTop;
    window.scrollTo({
      left: 0,
      top: location - 80,
    });
  }
};

调用时传入路由地址：

<CustomLink
  to={item.to}
  onClick={(e) => handleClick(e, item.to)}
  className="menu__link"
>
  {item.display}
</CustomLink>

二、暗黑模式切换失效的排查与修复 #

从代码看，toggleTheme是通过props传递给Header的，大概率是状态传递环节出了问题，你可以按以下步骤排查：

1. 确认布局组件的状态维护：检查你的根组件（比如App.js）是否正确维护了theme状态，并且把theme和toggleTheme正确传递给Header。示例代码如下：

import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import Service from './Service';

function App() {
  const [theme, setTheme] = useState('light-theme');
  
  const toggleTheme = () => {
    const newTheme = theme === 'light-theme' ? 'dark-theme' : 'light-theme';
    setTheme(newTheme);
    // 可选：把主题存入localStorage，刷新后保持状态
    localStorage.setItem('theme', newTheme);
  };

  // 初始化时从localStorage读取主题
  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) setTheme(savedTheme);
  }, []);

  // 给body添加主题类名，确保样式生效
  useEffect(() => {
    document.body.className = theme;
  }, [theme]);

  return (
    <Router>
      <Header theme={theme} toggleTheme={toggleTheme} />
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/service" element={<Service />} />
        {/* 其他页面路由 */}
      </Routes>
    </Router>
  );
}

export default App;

2. 确认toggleTheme的调用没有被阻止：你的代码里是在独立的span上绑定onClick={toggleTheme}，这个逻辑本身没问题，只要props传递正确，点击就会触发状态更新。

三、其他注意事项 #

• 检查CustomLink的useMatch逻辑：end: true表示精确匹配，如果你后续有嵌套路由，可能需要调整这个参数，但当前一级路由的场景下是适用的。
• 确保路由配置完整：你的Routes里必须包含所有导航对应的路径（比如/home、/service等），否则跳转后会显示404页面。

备注：内容来源于stack exchange，提问作者laalaaala