#astro layouts

3 messages · Page 1 of 1 (latest)

feral vine
#

I have BaseLayout

---
import { ClientRouter } from "astro:transitions";
import Navbar from "../components/Navbar.astro";

const { title, children } = Astro.props;
---

<!doctype html>
<html lang="en" view-transition>
  <head>
    <title>{title}</title>

    <link rel="stylesheet" href="/static/styles/globals.css" />
  </head>

  <body>
    <Navbar />

    <main class="container">
      {children}
    </main>

    <ClientRouter />
  </body>
</html>

And an index.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout
  title="Homepage"
>

  <ul class="url-list">
    <li><a href="/games">Games</a></li>
  </ul>
</BaseLayout>

But

  <ul class="url-list">
    <li><a href="/games">Games</a></li>
  </ul>

is not being rendered (it is not in the index.html build output) for some reason

main sapphireBOT
#

Hi @feral vine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The issue is that in Astro, layout components do not receive a special prop called children like in React. Instead, Astro uses the <slot /> element to render any child content passed between the opening and closing tags of a component. In your BaseLayout, you are trying to render {children}, which will not work in Astro.

How to fix:

Replace {children} in your BaseLayout.astro with <slot />. Here’s how your layout should look:

---
import { ClientRouter } from "astro:transitions";
import Navbar from "../components/Navbar.astro";

const { title } = Astro.props;
---

<!doctype html>
<html lang="en" view-transition>
  <head>
    <title>{title}</title>
    <link rel="stylesheet" href="/static/styles/globals.css" />
  </head>
  <body>
    <Navbar />
    <main class="container">
      <slot />
    </main>
    <ClientRouter />
  </body>
</html>

This will correctly render any child content (like your <ul class="url-list">...</ul>) inside the layout. This is the standard way to pass and render children in Astro layouts, as documented in the official guides and migration resources [Astro layouts].

References:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: