Reactjs GatsbyJS：在页面之间切换时更改菜单链接

我有一个简单的盖茨比网站使用两种语言。在header组件中，有一个指向第二种语言的链接，单击该链接时，该语言将成为选定语言，而另一种语言必须作为选项显示。一切正常，但在不刷新页面的情况下不会加载这些更改。我做错了什么？这是我的密码：

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import AnchorLink from "react-anchor-link-smooth-scroll"
import Logo from "../images/logo.svg"

const path = window.location.pathname;

const Header = ({ siteTitle }) => {
  return (
    <>
      <header>
        <div className="container">
          <div className="nav-links">
            <Link to="/" className="logo">
              <Logo />
            </Link>
            <div className="wrapper">
              <AnchorLink href="#contact" className="nav-item contact">
                Contact us
              </AnchorLink>
            </div>
            <AnchorLink className="button button--sm" href="#contact">
              Contact
            </AnchorLink>
            {path === '/' && (
              <Link to='/de' className="nav-item">
                DE
              </Link>
            )}
            {path === '/de' && (
              <Link to='/' className="nav-item">
                EN
              </Link>
            )}
          </div>
        </div>
      </header>
    </>
  )
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

从“盖茨比”导入{Link}
从“道具类型”导入道具类型
从“React”导入React
从“反应锚点链接平滑滚动”导入锚点链接
从“./images/Logo.svg”导入徽标
const path=window.location.pathname；
常量头=（{sitetTitle}）=>{
返回(
联系我们
接触
{path=='/'&&(
判定元件
)}
{path==='/de'&&(
EN
)}
)
}
Header.propTypes={
siteTitle:PropTypes.string，
}
Header.defaultProps={
网站名称：``，
}
导出默认标题

我认为应该将

路径

变量放在

标题

组件中，以便在每次渲染时对其进行重新评估

const Header = ({ siteTitle }) => {
  const path = window.location.pathname;
  return ( 
    <>
      <header>

const头=（{sitetTitle}）=>{
const path=window.location.pathname；
报税表（

真的，就这样！非常感谢！