我如何使用 "props.location.pathname" React js 更改导航栏背景颜色

Question

我正在尝试根据页面更改导航栏颜色。我希望它是背景：“rgba(255,255,255, .0)”当位置路径 ===“/”时，每隔一页都是白色。

const root = props.location.pathname


const classes = useStyles()

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

Answer 1

我认为您可以简单地通过使用模板文本向组件添加 class 或样式来实现这一点，例如使用样式

const YourComponent = (props) => {
const {pathname} = this.props.location;

return (
    <>
        <YourNavbar style={{background:`${pathname === '/'?'yourColor1':'yourColor2'}`}}></YourNavbar>
    </>
)}

我如何使用 "props.location.pathname" React js 更改导航栏背景颜色

How could i change navbar background color using "props.location.pathname" React js

reactjs

react-dom