Add a Shared Layout Component to a Gatsby Site

Instructor: [0:03] Create a folder in src called components. Inside that folder, create a file called layout.js. Import React from 'react' and create a new component. We'll call our component layout. For right now, it will only return a div. Make sure to export layout as the default export of this file.

[0:43] Inside our div, we're going to use Semantic HTML. We'll create a header tag with a nav inside of it.

[0:58] We'll import the link component from the Gatsby package. This allows us to create routes between pages within our project. We'll link to / which is home and use the appropriate text.

[1:23] We'll also add a main element. In order to do that, we want to pass children into our layout component and display those children inside main.

[1:38] Finally, we'll add a footer element. We'll put a paragraph inside and call it A fun footer.

[1:53] Once we've saved, we're going to use our layout. We'll import layout from the relative path in our index page, ../components/layout. Now we'll wrap our entire Hello World div in layout. Since we have more than one line in our component, we'll need to add parentheses as well.

[2:30] Now we can see that our page renders inside our layout. We can do the same for our 404 page. This way, when a user accidentally navigates to a page that they weren't meant to go to, they'll always be able to access home and go back to the main page.