基于Flowbite的React网站明暗主题Logo切换组件问题求助

原代码存在的问题 #

• 未导入flowbite-react提供的useThemeMode钩子
• useThemeMode().theme.;存在语法错误（多余的末尾点）
• 图片路径大小写不一致（/images/与/Assets/），可能导致资源加载失败
• 组件结构冗余，重复编写了<a>和<img>标签

修复后的完整组件代码 #

import React from "react";
import { useThemeMode } from "flowbite-react";

const LogoSwitch = () => {
  const { theme } = useThemeMode();

  // 统一路径格式，确保大小写匹配实际文件位置
  const logoSrc = theme === "dark" 
    ? `${window.location.origin}/images/logo-dark.svg` 
    : `${window.location.origin}/images/logo-light.svg`;

  return (
    <a href="./">
      <img
        className="block h-8 w-auto"
        src={logoSrc}
        alt="Tribeto logo"
      />
    </a>
  );
};

export default LogoSwitch;

关键修复说明 #

1. 导入主题钩子：从flowbite-react引入useThemeMode，这是获取当前主题状态的官方API
2. 修正语法错误：通过解构赋值直接获取theme属性，移除原代码中多余的末尾点
3. 统一资源路径：将路径统一为小写格式（需确保实际文件路径与代码一致），避免因文件系统大小写敏感导致加载失败
4. 精简组件结构：提取重复的<a>和<img>标签，通过变量动态切换图片路径，减少冗余代码

使用方式 #

在导航栏组件中按以下方式导入并调用：

import Logo from "./LogoSwitch";

// 在导航栏JSX结构中使用
<Logo />

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