在React.js中如何通过props.location.pathname修改导航栏背景色

你可以选择以下两种方式实现需求，原有逻辑不需要改动，只需要新增路径判断和样式绑定逻辑即可：

方案1：内联样式绑定（适合简单场景） #

完整修改后代码如下：

import { useState, useEffect } from 'react'

// 组件内部代码
const currentPath = props.location.pathname
const classes = useStyles()
// 新增导航栏背景色状态，默认首页透明
const [navBg, setNavBg] = useState('rgba(255,255,255, 0)')

useEffect(() => {
  if (props.location) {
    // 保留原有控制open状态的逻辑
    setOpen(props.location.customData === true)
    // 新增背景色判断逻辑
    setNavBg(currentPath === '/' ? 'rgba(255,255,255, 0)' : '#fff')
  }
}, [props.location, currentPath])

// 导航栏组件绑定样式示例
// <nav style={{ backgroundColor: navBg }}>导航栏内容</nav>

方案2：动态类名绑定（适合复杂样式场景） #

如果用的是Material-UI的useStyles，可以直接通过路径判断类名，不需要额外维护state，性能更优：

1. 先调整useStyles的样式定义：

const useStyles = makeStyles({
  navBase: {
    // 导航栏通用样式
    transition: 'background-color 0.3s ease', // 可选，添加过渡效果更顺滑
  },
  navTransparent: {
    backgroundColor: 'rgba(255,255,255, 0)'
  },
  navWhite: {
    backgroundColor: '#ffffff'
  }
})

2. 组件内直接绑定类名即可，原有useEffect逻辑不需要改动：

const currentPath = props.location.pathname
const classes = useStyles()

useEffect(() => {
  if (props.location) {
    setOpen(props.location.customData === true)
  }
}, [props.location])

// 导航栏组件绑定类名示例
// <nav className={`${classes.navBase} ${currentPath === '/' ? classes.navTransparent : classes.navWhite}`}>
// 导航栏内容
// </nav>

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