React路由路径变化时如何移除组件属性 实现导航栏透明度适配

现有代码存在3个核心问题需要调整：

• 直接读取Route.path无法拿到当前激活的路由路径，需要借助react-router的withRouter高阶组件获取路由信息
• 滚动事件监听的存储、移除逻辑错误，addEventListener返回值为undefined，原写法无法正确保存监听器
• 缺少路由路径变化时的状态更新逻辑，无法在切页时自动修改transparent状态

完整修改步骤 #

1. 接入路由属性 #

首先用withRouter包裹你的组件，获取当前路由路径：

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

// 组件导出时包裹
export default withRouter(你的组件名);

2. 修正生命周期与监听逻辑 #

// 新增公共方法：判断当前是否为首页
isHomePage = () => {
  return this.props.location.pathname === '/';
}

componentDidMount() {
  // 将监听函数存到this.listener，方便后续移除
  this.listener = () => {
    // 非首页直接不执行滚动透明逻辑
    if (!this.isHomePage()) return;
    const scrolled = document.scrollingElement.scrollTop;
    this.setState(prev => {
      const newTransparent = scrolled < 150;
      // 状态无变化则不更新，避免多余渲染
      if (prev.transparent === newTransparent) return null;
      return { transparent: newTransparent };
    });
  };
  document.addEventListener('scroll', this.listener);
}

componentDidUpdate(prevProps) {
  // 监听路由路径变化
  if (prevProps.location.pathname !== this.props.location.pathname) {
    if (!this.isHomePage()) {
      // 切到非首页直接将transparent设为false
      this.setState({ transparent: false });
      // 可选：切页自动滚动到顶部，优化体验
      window.scrollTo(0, 0);
    } else {
      // 切回首页时，根据当前滚动位置重置透明状态
      this.listener();
    }
  }
}

componentWillUnmount() {
  // 组件卸载时再移除监听，不要在componentDidUpdate中移除
  document.removeEventListener('scroll', this.listener);
}

3. 简化render逻辑 #

render() {
  return (
    <>
      {/* 非首页直接传false，移除透明效果 */}
      <Header transparent={this.isHomePage() ? this.state.transparent : false} />

      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/aboutus' component={AboutUs} />
        <Route path='/shop' component={Shop} />
      </Switch>
      <Footer />
    </>
  );
}

如果你使用的是React Router v6版本，withRouter已被移除，可以改用useLocation钩子将组件改成函数式组件，逻辑规则和上述代码一致。

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