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

Extract a RedwoodJS Layout Component

Ian Jones
InstructorIan Jones
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 2 years ago

RedwoodJS gives us a cli command to generate layouts.

yarn redwood generate layout main

This will generate a MainLayout component in src/layouts/MainLayout/. We can use this layout component to define any headers or footers we want to share across multiple pages.

Instructor: [00:00] Here we have a nav component in our IndexPage. If we hop over to our AboutPage, we don't have any nav component. We could add a nav component here, but then when we make a change to our nav component in the Index, we'll have to go to every page and update it if we wanted it to be the same.

[00:24] Instead, we can extract a layout component. Redwood has a generate function for us. We can go yarn rw g layout, and then the first argument to layout is the name of the component that we want to make. We will call this main. Redwood has generated a MainLayout component. Let's go look at it.

[00:54] A layout component is expected to render children, because a layout component is a way to wrap your specific pages, so an AboutPage or IndexPage, with the content that you don't want to redefine every time, such as a header, or a footer, or some sort of side panel.

[01:15] We will hop over to our IndexPage and we'll grab our nav. We'll cut that. Then we'll go back to our layout. We'll paste our nav and we'll wrap our children in a main. We'll let Prettier do its thing.

[01:41] As you can see, we need to import a Link and routes, so import { Link, routes } from '@redwoodjs/router'. We can go back to our IndexPage and get rid of this. We can import MainLayout from 'src/layouts/MainLayout'.

[02:15] As you can see, I didn't do an absolute path. Redwood aliases your src directory so that you can import anything from the top down. Instead of this wrapping div we're going to use MainLayout. We'll open our terminal and yarn rw dev.

[02:39] Let's hop over to our browser. You can see that our header is still there. Now let's add this MainLayout component to our AboutPage, import MainLayout from 'src/layouts/ MainLayout'. Now we have About. Let's add our path to index().

[03:31] That's how you extract a layout component.

egghead
egghead

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