Gatsby 有没有办法将状态传递给页面？

Question

由于 Gatsby 有效地隐藏了路由器，因此您无法像在 Create-React-App 中使用 BrowserRouter 那样将 props 传递到每个页面。在盖茨比中有没有办法做到这一点？我想我需要在 Gatsby-browser.js 中以某种方式完成它。我基本上想维护一个名为 Step 的状态，所有页面都可以访问该状态。我必须为此使用 Context 吗？

Answer 1

您可以使用

Link

(docs) 将状态传递到页面中，但请注意在没有状态的情况下构建的页面（即静态）。

<Link
  to={`/photos/`}
  state={{ tag }}
>
  See more {tag}
</Link>

const PhotosPage = ({ location: { state } }) => 
  <div>{state?.tag ? `${tag} photos` : "All photos"}</div>

Answer 2

本机（也是最简单的）方法是使用 React context，但是在 Gatsby 中您有多种方式共享全局状态：

• 在

  wrapRootElement

  或

  wrapPageElement

  公开的API中使用全局包装器：

  import React from "react"
  import { ThemeProvider } from "./src/context/ThemeContext"
  
  export const wrapRootElement = ({ element }) => (
     <ThemeProvider>{element}</ThemeProvider>
  )
  

  如果您采用这种方法，则需要在

  wrapRootElement

  和

  gatsby-browser.js

  中使用

  gatsby-ssr.js

  ，因为它是 共享 API。

请记住，Gatsby 的路由器是从

@reach/router

（来自 React）扩展而来的。

这样，您将在整个应用程序中保持

step

状态。