在 Gatsby 中将 location 和 pageContext 从页面传递给子组件

Question

我的 Gatsby 网站页面布局如下所示。

const Container = ({location, children, pageContext}) => {
  return (
    <>
      <Header location={location} />
      <Breadcrumbs pageContext={pageContext} />
      {children}
      <Footer />
    </>
  )
}

我需要将页面中的location 和pageContext 传递给子组件。我尝试将location 和pageContext 添加到DataProvider，如下所示：

export const DataContext = React.createContext();

const DataProvider = ({ children, location, pageContext }) => {
  return (
    <DataContext.Provider value={{
      location,
      pageContext
    }}>
      {children}
    </DataContext.Provider>
  )
};

export default DataContext
export { DataProvider }

然后我在gatsby-ssr.js 和gatsby-browser.js 中使用DataProvider，如下所示：

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
    <DataProvider>
      {element}
    </DataProvider>
  </ThemeProvider>
);

在子组件中：

const HeaderLinks = () => {
  return (
    <DataContext.Consumer>
      {
        context => (
          <Menu
            theme="light"
            mode="horizontal"
            selectedKeys={[context.location.pathname]}
          >
            <Menu.Item key={key}>
              <Link to={url}>{name}</Link>
            </Menu.Item>
          </Menu>
        )
      }
    </DataContext.Consumer>
  )
}

但它似乎不起作用，因为当我移动到另一个页面时它没有得到更新。 （我也有wrapPageElement 和Container，可能就是这个原因。）

如何将location 和pageContext 传递给子组件？使用 React Context 还是简单地将它们作为道具传递更好？如果我应该使用 React Context，我该如何更正我的代码以使其正常工作？

Answer 1

我最终使用来自@reach/router 的useLocation 来返回子组件中的位置。我只是将pageContext 作为道具传递给<Breadcrumbs />，因为它只使用一次并且不会传递给任何子组件。

Answer 2

您可以使用wrapPageElement，而不是使用wrapRootElement 来使用ContexProvider，您可以在其中获取页面道具并将它们传递给DataProvider。这将确保每个页面上的 pageContext 和位置都发生变化

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={theme}>
      {element}
  </ThemeProvider>
);

export const wrapPageElement = ({ element, props }) => (
  <DataProvider value={props}>
      {element}
  </DataProvider>
);

---

export const DataContext = React.createContext();

const DataProvider = ({ children, value }) => {
  const {location, pageContext} = value;
  return (
    <DataContext.Provider value={{
      location,
      pageContext
    }}>
      {children}
    </DataContext.Provider>
  )
};

export default DataContext
export { DataProvider }