Reactjs 路径名作为类名TypeError:无法读取属性'；更换'；未定义的

我用的是盖茨比，react，这是一个标题组件

我想在nav.gnbUl上添加一个通过onClick事件匹配路径名的类。 它在一个普通的react页面上工作，但这次在盖茨比网站上没有

它表示TypeError:无法读取未定义的属性“replace” 我该修哪一部分

import React, { useState } from "react"
import { Link } from "gatsby"
//import PropTypes from "prop-types"
import logo from "../img/logo/logo.svg"

function Header({ /*siteTitle,*/ pathname }) {
  const [path, setPath] = useState(pathname.replace("/", ""))

  function handleClick(path) {
    setPath(path.replace("/", ""))
  }
  return (
    <header className="headerWrap">
      <p className="companyTopLogo imgWrap">
        <Link to="/">
          <img src={logo} alt="logo" />
        </Link>
      </p>
      <nav className={`gnbUl ${path}`}>
        <Link to="/Elsa/" onClick={() => handleClick("/Elsa")}>
          ELSA
        </Link>
        {/*<Link to="./App">R&amp;BD projects</Link>*/}
        <Link to="/AboutUs/" onClick={() => handleClick("/AboutUs")}>
          about us
        </Link>
        <Link to="/news/" onClick={() => handleClick("/news")}>
          news &amp; press
        </Link>
        <a href="#none" title="">
          contact us
        </a>
      </nav>
    </header>
  )
}
/*Header.propTypes = {
  siteTitle: PropTypes.string,
}
Header.defaultProps = {
  siteTitle: ``,
}
*/
export default Header

import React，{useState}来自“React”
从“盖茨比”导入{Link}
//从“道具类型”导入道具类型
从“./img/logo/logo.svg”导入徽标
函数头（{/*sitetTitle，*/pathname}）{
const[path，setPath]=useState（路径名.replace（“/”，“”））
函数handleClick（路径）{
setPath（path.replace（“/”，“”））
}
返回(


handleClick（“/Elsa”）}>
埃尔莎
{/*R&；BD项目*/}
handleClick（“/AboutUs”）}>
关于我们
handleClick（“/news”）}>
新闻与出版
)
}
/*Header.propTypes={
siteTitle:PropTypes.string，
}
Header.defaultProps={
网站名称：``，
}
*/
导出默认标题

---

您需要将您的函数放入

组件didmount

生命周期或

useffect

挂钩中。这是因为在盖茨比中，渲染时没有关于某些参数的信息，例如

窗口

、路径等

因此，在初始渲染点，将

useState

定义为空（即：空字符串或其他内容），并在

useffect

钩子内，一旦呈现布局，设置函数

  const [path, setPath] = useState('')


    useEffect(()=>{
      setPath(pathname.replace("/", "")
    },[])

---

加载header组件时，您可以在

中查看更多信息是否确实要将一些初始值传递给pathname prop？