Блог

Поскольку Gatsby эффективно скрывает маршрутизатор, вы не можете передавать реквизиты на каждую страницу так, как вы бы делали с BrowserRouter в Create-React-App. Есть ли способ сделать это в Gatsby? Я предполагаю, что мне нужно как-то это сделать в Gatsby-browser.js . Я в основном хочу поддерживать состояние с именем Step, доступное для всех страниц. Должен ли я использовать контекст для этого?

Вы можете передать состояние на страницу с Link помощью (docs), но помните о том, что страницы создаются без состояния (т. Е. Статически).

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

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

Родной (и самый простой) способ — использовать контекст React, но у вас есть несколько способов поделиться глобальным состоянием в Gatsby:

• Использование глобальных оболочек в wrapRootElement открытом 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 состояние во всем приложении.