React中如何根据当前URL是否为首页切换元素class与图片资源

核心逻辑 #

基于Gatsby的路由能力判断当前页面是否为首页（路径为/），再通过三元运算符动态切换class和图片资源即可。

1. 头部Logo组件修改 #

步骤 #

• 提前准备适配浅色页面的深色版logo，存入项目图片目录
• 导入路由钩子和两个logo资源
• 动态判断渲染对应logo

完整修改后代码 #

import { Link, useLocation } from 'gatsby';
// 导入两个版本logo
import LightLogo from '../images/logo-2-light.png';
import DarkLogo from '../images/logo-2-dark.png'; // 替换为你的深色logo实际路径

const Header = () => {
  const location = useLocation();
  // 判断当前是否为首页
  const isHome = location.pathname === '/';

  return (
    <header className='bg-transparent absolute top-8 md:top-14 left-10 z-10'>
      <Link to='/'>
        <img 
          src={isHome ? LightLogo : DarkLogo} 
          className='w-20 md:w-24 lg:w-52' 
          alt='PNFB LTD logo' 
        />
      </Link>
    </header>
  );
};

export default Header;

2. Sidebar汉堡菜单组件修改 #

步骤 #

• 用withRouter高阶组件包裹Sidebar类组件，获取路由属性
• 动态判断切换菜单文字的颜色class

完整修改后代码 #

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import { Link, withRouter } from 'gatsby'; // 导入withRouter

var styles = {
  bmCrossButton: {
    height: '64px',
    width: '64px',
    right: '2rem',
    top: '2rem',
  },
  bmMenuWrap: {
    position: 'fixed',
    height: '100%',
  },
  bmMorphShape: {
    fill: '#373a47',
  },
  bmOverlay: {
    background: 'rgba(0, 0, 0, 0.3)',
  },
};

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false,
    };
  }

  handleStateChange(state) {
    this.setState({ menuOpen: state.isOpen });
  }

  closeMenu() {
    this.setState({ menuOpen: false });
  }

  toggleMenu() {
    this.setState((state) => ({ menuOpen: !state.menuOpen }));
  }

  render() {
    // 从props获取路由信息，判断是否为首页
    const { location } = this.props;
    const isHome = location.pathname === '/';
    // 按需修改你要替换的class，示例非首页用text-gray-900
    const menuTextColor = isHome ? 'text-gray-100' : 'text-gray-900';
    const buttonTextColor = isHome ? 'text-white' : 'text-gray-900';

    return (
      <Menu
        right
        width={425}
        styles={styles}
        isOpen={this.state.menuOpen}
        onStateChange={(state) => this.handleStateChange(state)}
        // 动态切换按钮class
        burgerButtonClassName={`absolute top-8 md:top-14 right-10 hover:underline ${buttonTextColor}`}
        itemListClassName={'flex'}
        menuClassName={'bg-gray-900 text-gray-100 px-6 focus:outline-none'}
        // 动态切换菜单文字颜色
        customBurgerIcon={
          <span className={`font-bold text-xl md:text-2xl ${menuTextColor} tracking-wider hover:underline`}>
            Menu
          </span>
        }
        // 关闭按钮如果需要也可以加同样的判断，不需要可以不改
        customCrossIcon={
          <span className='font-bold text-xl md:text-2xl text-gray-100 tracking-wider hover:underline'>
            Close
          </span>
        }>
        <div className='flex flex-col pt-16 sm:pt-32 md:pt-48 px-12 '>
          <nav className='flex flex-col '>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl mb-6 tracking-wide hover:text-red-500'
              to='/'>
              Home
            </Link>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl mb-6 tracking-wide hover:text-red-500'
              to='/charity'>
              Our Charity
            </Link>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl tracking-wide hover:text-red-500'
              to='/contact'>
              Contact
            </Link>
          </nav>
          </div>
        </div>
      </Menu>
    );
  }
}

// 用withRouter包裹组件，注入路由属性
export default withRouter(Sidebar);

注意事项 #

• 请将代码里的text-gray-900替换为你实际需要的非首页class
• 深色logo的路径请替换为你项目中实际存放的路径

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