带有反应路由器和黑暗模式的导航栏不能一起工作答案

【问题标题】：the navbar with reacte route and darkmode doesnt work together带有反应路由器和黑暗模式的导航栏不能一起工作
【发布时间】：2023-01-01 04:15:48
【问题描述】：

我创建了一个带有明暗模式的导航栏，一切正常。现在我想用react-router 和布局将它更新为多页。如果我给 url 的路径名就可以正常工作。问题是 url 向我显示了页面，但导航栏没有导航到 url 并且没有切换暗/亮模式。

import React, { useRef, useEffect } from "react";
import "./header.css";
import { Link, useMatch, useResolvedPath } from "react-router-dom"

const nav__links = [
  {
    to: "home",
    display: "Home",
  },

  {
    to: "service",
    display: "Service",
  },

  {
    to: "preise",
    display: "Preise",
  },

  {
    to: "kontakt",
    display: "Kontakt",
  },
];

const Header = ({ theme, toggleTheme }) => {
  const headerRef = useRef(null);

  const menuRef = useRef(null);

  const headerFunc = () => {
    if (
      document.body.scrollTop > 80 ||
      document.documentElement.scrollTop > 80
    ) {
      headerRef.current.classList.add("header__shrink");
    } else {
      headerRef.current.classList.remove("header__shrink");
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", headerFunc);

    return () => window.removeEventListener("scroll", headerFunc);
  }, []);

  const handleClick = (e) => {
    e.preventDefault();

    const targetAttr = e.target.getAttribute("to");

    const location = document.querySelector(targetAttr).offsetTop;

    window.scrollTo({
      left: 0,
      top: location - 80,
    });
  };

  const toggleMenu = () => menuRef.current.classList.toggle("menu__active");

  function CustomLink({ to, children, ...props }) {
    const resolvedPath = useResolvedPath(to)
    const isActive = useMatch({ path: resolvedPath.pathname, end: true })
  
    return (
      <li className={isActive ? "active" : ""}>
        <Link to={to} {...props}>
          {children}
        </Link>
      </li>
    );
  };

  return (
    <header className="header" ref={headerRef}>
      <div className="container">
        <div className="nav__wrapper">
          <div className="logo" to="home">
              <Link to="home"><h2>Q-Tech</h2></Link>
          </div>

          {/* ========= navigation ============= */}
          <div className="navigation" ref={menuRef} onClick={toggleMenu}>
            <ul className="menu">
              {nav__links.map((item, index) => (
                <li className="menu__item" key={index}>
                  <CustomLink
                    to={item.to}
                    onClick={handleClick}
                    className="menu__link"
                  >
                    {item.display}
                  </CustomLink>
                </li>
              ))}
            </ul>
          </div>

          {/* ============ light mode ============= */}
          <div className="light__mode">
            <span onClick={toggleTheme}>
              {theme === "light-theme" ? (
                <span>
                  <i class="ri-moon-line"></i>Dark
                </span>
              ) : (
                <span>
                  <i class="ri-sun-line"></i> Light
                </span>
              )}
            </span>
          </div>
          <span className="mobile__menu" onClick={toggleMenu}>
            <i class="ri-menu-line"></i>
          </span>
        </div>
      </div>
    </header>
  );
};

export default Header;

【问题讨论】：

哪个具体的您在这篇文章中需要帮助的问题是导航问题还是暗/亮模式问题？这篇文章需要更多关注。

标签： reactjs react-router-dom darkmode

【解决方案1】：

为什么导航不起作用？

看导航链接定义-CustomLink：

<CustomLink
  onClick={handleClick} // <--
   ...
>

您在链接上有一个 onClick 处理程序。在此事件处理程序中，您调用 e.preventDefault()，这会阻止导航行为。

为什么切换浅色/深色主题不起作用？

这里的切换按钮看起来不错。所以很可能是Header组件外的代码有问题。尝试调试 toggleTheme 功能。

【讨论】：