Question

我正在使用gatsby，这是HEADER组件。

我想在nav.gnbUl上添加一个类，该类通过onClick事件与路径名匹配。它可以在普通的React页面上运行，但是这次却不在gatsby网站上。

它显示 TypeError：无法读取未定义的属性“替换” 我应该修复哪一部分？

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

error messege

Answer 1

您需要将函数放入componentDidMount生命周期或useEffect挂钩中。这是因为在Gatsby中，渲染时没有某些参数的信息，例如window，路径等。

因此，在初始渲染点，将useState定义为空（即，空字符串或其他内容），并在useEffect钩子内部，一旦布局被渲染，就设置功能。</ p >

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


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

您可以在Debugging HTML in Gatsby's documentation.

中查看更多信息。

路径名作为类名TypeError：无法读取未定义的属性“替换”

1 个答案: