条件渲染状态异常：不同页面导航按钮样式无法正确切换求助

嘿，这个问题我之前也碰到过！核心原因是你在构造函数里设置状态的方式不对——构造函数只会在组件第一次挂载的时候执行一次，之后就算页面路径变了，组件不会重新初始化，所以状态就一直停留在第一次加载时的值了。

下面给你两种常见场景的解决方案：

如果你用的是类组件 #

我们需要监听路由路径的变化，在路径更新时重新计算按钮图片的链接：

1. 先移除构造函数里设置状态的代码，改用componentDidMount初始化状态，再用componentDidUpdate监听路径变化；
2. 如果组件不是直接由路由渲染的，记得用withRouter包裹组件，这样才能拿到location属性。

示例代码：

import React from 'react';
import { withRouter } from 'react-router-dom';

class NavButtons extends React.Component {
  state = {
    buttonImage: ''
  };

  // 组件挂载时初始化图片
  componentDidMount() {
    this.updateButtonImage(this.props.location.pathname);
  }

  // 组件更新时，对比前后路径是否变化，变化则更新图片
  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.updateButtonImage(this.props.location.pathname);
    }
  }

  // 抽离路径判断逻辑，方便维护
  updateButtonImage = (pathname) => {
    // 这里根据你的实际页面路径规则调整判断条件
    const imageUrl = pathname === '/' 
      ? '/light-version-button.png' 
      : '/dark-version-button.png';
    this.setState({ buttonImage: imageUrl });
  };

  render() {
    return <img src={this.state.buttonImage} alt="导航按钮" />;
  }
}

// 用withRouter包裹，让组件能获取location props
export default withRouter(NavButtons);

如果你用的是函数组件（更推荐的现代写法） #

用React Router的useLocation钩子获取路径，再配合useEffect监听路径变化：

import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function NavButtons() {
  const location = useLocation();
  const [buttonImage, setButtonImage] = useState('');

  // 当location.pathname变化时，重新计算图片链接
  useEffect(() => {
    const getImageUrl = (path) => {
      // 根据你的页面规则调整判断逻辑
      return path === '/' ? '/light-version-button.png' : '/dark-version-button.png';
    };
    setButtonImage(getImageUrl(location.pathname));
  }, [location.pathname]); // 依赖项设为路径，路径变就执行

  return <img src={buttonImage} alt="导航按钮" />;
}

export default NavButtons;

额外提示 #

• 可以把路径判断的逻辑单独抽成一个工具函数，比如getNavButtonImage(path)，这样后续修改页面规则时更方便；
• 确保你已经正确集成了React Router（如果用的是其他路由库，核心思路也是一样的：监听路径变化，更新状态）；
• 如果你的组件是路由直接渲染的（比如在Route的component属性里），类组件不需要额外用withRouter包裹，直接就能拿到location props。

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