Javascript 在Gatsby上的RouteUpdate上向元素添加样式或类

我有一个导航栏，我需要在每个非主页（/）的页面上更改颜色（添加类）

我尝试了很多选择，我认为最好的选择是在gatsby-browser.js或gatsby-ssr.js上

我需要把每一页都不是主页

下面是我的gatsby-browser.js

import { globalHistory } from "@reach/router"

globalHistory.listen(({ location }) => {

  if(location.pathname !== "/"){
    window.addEventListener('load', () => {
      document.getElementById("navbar").classList.add("navbar-interns")
    });
  }

})

---

有解决方案吗？

尝试将

位置作为道具从每个页面组件传递到导航栏组件

// ./components/navbar.js

import React from "react"

const Navbar = ({ location }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let navBarClassName
  if (location.pathname === rootPath) {
    navBarClassName = "navbar--homepage"
    return <div className={navBarClassName}>my homepage navbar stuff</div>
  } else {
    navBarClassName = "navbar--other"
    return <div className={navBarClassName}>my other navbar stuff</div>
  }
}

export default Navbar

/./components/navbar.js
从“React”导入React
常量导航栏=（{location}）=>{
常量rootPath=`${uuuuuuuuuuuuuuuuuuuuu前缀}/`
让navBarClassName
if（location.pathname==rootPath）{
navBarClassName=“navbar——主页”
返回我的主页导航栏的东西
}否则{
navBarClassName=“navbar——其他”
还我其他导航栏的东西
}
}
导出默认导航栏


/./pages/index.js
从“React”导入React
从“盖茨比”导入{Link}
从“./组件/Navbar”导入Navbar
常量IndexPage=（{location}）=>(
转到第2页
)
导出默认索引扩展


/./pages/page-2.js
从“React”导入React
从“盖茨比”导入{Link}
从“./组件/Navbar”导入Navbar
const SecondPage=（{location}）=>(
返回主页
)
导出默认第二页

抱歉，但是：TypeError:无法读取第行未定义的属性“pathname”：if（Location.pathname==rootPath）{我尝试从路由导入（从'@reach/router'导入{Location}；）位置，但仍然出错。
位置
位置

我的页面使用layout.js类似这样：

//layout.js children

//index.js/*页面内容在这里*/

如果您使用的是类组件，则我的代码在这里，您需要执行

此.props.location

您找到解决方案了吗？@ksav否！我为内部页面创建了一个新的导航栏，并将其放在每个页面上…可以检查此链接

// ./pages/index.js

import React from "react"
import { Link } from "gatsby"
import Navbar from "../components/navbar"

const IndexPage = ({ location }) => (
    <>
        <Navbar location={location} />
        <Link to="/page-2/">Go to page 2</Link>
    </>
)

export default IndexPage

// ./pages/page-2.js

import React from "react"
import { Link } from "gatsby"

import Navbar from "../components/navbar"

const SecondPage = ({ location }) => (
    <>
        <Navbar location={location} />
        <Link to="/">Go back to the homepage</Link>
    </>
)

export default SecondPage