Can't set persistent component and transitioning content

[eduoliveira85]

I'm having issues placing persistent content in my website. The thing is I have this header that's intended to be placed over every page and transitions. Before that, I was using TransistionPortal but then I red over here that it isn't meant for that case.

However, I guess I'm not understanding the use of this option. I've set it and the result I get is always this, where the header is shown but no content or transition. Here is the repo

Here it its my gatsby-config.js with the Header.js requisition:

{
  resolve: `gatsby-plugin-transition-link`,
    options: {
      layout: require.resolve(`./src/components/layout/Header.js`)
    },
}

The component exists within the Layout.js and then I've tried removing it from there. The result is the same.

import React, { useRef } from 'react';
import Footer from './Footer';
import Header from './Header';

const Layout = ({ children, id, footerPlacement, itemsAlignment, mainHeight }) => {
  const placements = {
    fixed: `lg:fixed`,
    loose: ` `
  }

  const aligments = {
    center: `items-center`,
    none: ` `
  }

  const mHeights = {
    auto: `md:h-auto`,
    screen: `md:h-screen`
  }

  return (
    <>
      <div className="w-full lg:h-auto bg-white">
        <Header className="" />
        <main className={`text-gray-900 flex 
        ${mHeights[mainHeight] || mHeights.screen}
        ${aligments[itemsAlignment] || aligments.center}`}>
          <section id={id} 
            className="w-full h-auto">
            {children}
          </section>
        </main>
        <Footer placement={`
          ${placements[footerPlacement] || placements.fixed}
        `} />
      </div>

    </>
  );
};

export default Layout;

What am I doing wrong? Sorry if this is a silly question. I really am trying to learn React/Gatsby.

[eduoliveira85]

Currently working on repro-prototype branch.

[TylerBarnes]

Hey @edueter the issue is that you're specifying your Header component as a layout, but it's not a layout. What you want to do is add a layout component to that option and put your Header component inside of your layout. The layout wraps around the outside of your page by way of React's children prop but your Header component doesn't add children. The effect is that you're rendering a header and discarding your page component.

[eduoliveira85]

Hey @edueter the issue is that you're specifying your Header component as a layout, but it's not a layout. What you want to do is add a layout component to that option and put your Header component inside of your layout. The layout wraps around the outside of your page by way of React's children prop but your Header component doesn't add children. The effect is that you're rendering a header and discarding your page component.

I see! Then I got it all wrong and couldn't figure it out. Thanks, Tyler! Going to test it tomorrow in the office.

Thanks for your plugin too. It's very handy!