Gatsbyjs 在布局中加载不同的 header

Question

我的项目中有 2 header 个组件。

布局组件在src/layouts/index.jsx

下

const Layout = ({ children, data }) => (
............code here...........
)

我需要根据用户所在的页面加载不同的 Header 组件。

我该怎么做？

Answer 1

您可以在渲染组件之前使用 location 属性并检查 pathname。

像这样：

const Layout = ({ children, data, location }) => (
  <div>
    {location.pathname === '/home' &&
      <FirstHeader />
    }
    {location.pathname === '/page-2' &&
      <SecondHeader />
    }
  </div>
);

Gatsby 实际上在内部将 react-router 用于其路由系统，因此您可以在此处使用相同的逻辑。

Gatsbyjs 在布局中加载不同的 header

Gatsbyjs load different header in layout

reactjs

react-router

gatsby