Gatsbyjs загружает разные заголовки в макете

Question

У меня есть 2 компонента заголовка в моем проекте.

Компонент макета находится в каталоге src / layouts / index.jsx

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

Мне нужно загрузить другой компонент заголовка в зависимости от того, на какой странице находятся пользователи.

Как я могу это сделать?

Answer 1

Вы можете использовать опору location и проверить pathname перед рендерингом вашего компонента.

Примерно так:

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

Гэтсби фактически использует react-router для своей системы маршрутов, поэтому вы можете использовать ту же логику здесь.