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

Question

I am trying to change navbar color color depending on the page. I want it to be background: "rgba(255,255,255, .0)" when location path === "/" and white on every other pages.

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

I think you can achieve this simply by adding class or style to your component with template literals, for Example using style

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

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