⚠️ This lesson is retired and might contain outdated information.

Add a Shared Layout Component to a Gatsby Site

Laurie Barth
InstructorLaurie Barth
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

Create a shared Layout component with semantic HTML to provide proper landmarks to the page. Additionally, use the Link component from the core Gatsby package to add a Homepage route to the header.

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.

egghead
egghead
~ 27 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today