reactjs - 允许组件检测 Gatsby 中的路由变化

Question

在 Gatsby 项目中，我有一个标题组件，它在每个页面上都是持久的。标题有一个模式来显示导航。每当路线更改时，我都需要将 isOpen 状态设置为 false，以便导航模式关闭。由于路线不仅可以通过单击模式中的链接来更改，还可以通过使用浏览器上的后退按钮来更改，因此我不希望在链接上使用事件来关闭模式。

在 Gatsby 中，我可以使用 gatsby-browser.js 中的 onRouteUpdate 来检测路由更改，这很有效。但是我需要将事件传递给我的组件，这就是我遇到困难的地方。我已经简化了下面的代码来显示设置。

gatsby-browser.js:

import React from "react"
import Layout from "./src/components/layout"

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

export const onRouteUpdate = () => {
  console.log("onRouteUpdate") // this works
}

布局.js:

import React from "react"

import Header from "./header"
import Footer from "./footer"

const Layout = ({ children }) => (
    <>
      <Header />
      <main>
        {children}
      </main>
      <Footer />
    </>
  )

export default Layout

头文件.js:

import React, { useState } from "react"

const Header = () => {
  const [isOpen, setIsOpen] = useState(null)
  const toggleState = ({ props }) => {
    let status
    if (props) status = props.status
    else status = !isOpen
    setIsOpen(status)
  }
  return (
    <header>
      <div>This is the header</div>
      <button onClick={toggleState}>Toggle Open/Close</button>
      <button onClick={toggleState({ status: false })}>This will always close</button>
      /* logic here uses isOpen state to determine display */
    </header>
  )
}

export default Header

Answer 1

我解决这个问题的首选方法是使用未记录的 globalHistory来自 @reach/router ， Gatsby 使用的。

import { globalHistory } from '@reach/router'

useEffect(() => {
  return globalHistory.listen(({ action }) => {
    if (action === 'PUSH') setIsOpen(false)
  })
}, [setIsOpen])

现在每当您切换路线时，上述效果都会触发。
Source .