SvelteKit中为何无法从+layout.svelte向+page.svelte传递Props？

Great question—this is such a common gotcha when you’re getting familiar with SvelteKit’s layout system! Let’s break down why this behavior exists, and the idiomatic patterns SvelteKit expects you to use instead.

First, to confirm what you’ve observed:

• +layout.svelte’s $props aren’t automatically inherited by child +page.svelte files
• You can’t manually pass props through {@render children()} without setting up external state management

Here’s the reasoning behind this design choice:

1. Layouts are for shared UI, not component state #

SvelteKit’s layout system is built to handle consistent UI frames (think navbars, footers, or sidebars) across routes. The core idea is to separate concerns: layouts manage the "wrapper" of your app, while pages handle route-specific content and data. Automatic prop inheritance would blur this line, making it harder to track where state comes from as your app scales.

2. Route-based data flow is intentional #

SvelteKit encourages a top-down data flow rooted in routes, not parent-child component props. Instead of passing data from layout to page, you’re meant to use these built-in patterns:

• Layout load functions: Data fetched in +layout.js or +layout.server.js is automatically available to both the layout and all its child pages via $data. This is perfect for shared data like user sessions or site-wide settings.
• Stores: Create shared Svelte stores (writable, derived, etc.) for state that needs to be accessed across multiple layouts and pages. This keeps state management explicit rather than hidden behind implicit prop passing.

For example, using a store:

// $lib/stores.js
import { writable } from 'svelte/store';
export const siteTheme = writable('light');

In your +layout.svelte:

<script>
  import { siteTheme } from '$lib/stores';
</script>

<nav>
  <button on:click={() => $siteTheme = $siteTheme === 'light' ? 'dark' : 'light'}>
    Toggle Theme
  </button>
</nav>

{@render children()}

In any child +page.svelte:

<script>
  import { siteTheme } from '$lib/stores';
</script>

<div class="page-content" class:dark-theme={$siteTheme === 'dark'}>
  <!-- Page content here -->
</div>

3. Avoiding prop drilling pitfalls #

Automatic prop inheritance from layout to page could lead to accidental prop drilling—where props get passed through layers of components without clear purpose. SvelteKit’s design pushes you to use more scalable patterns (stores or load functions) that are easier to maintain as your app grows.

4. Keeping pages independent #

Pages are meant to be self-contained in many scenarios, even when wrapped by a layout. If layouts could pass props to pages, it would create tight coupling between the two, making it harder to reuse pages with different layouts or test them in isolation.

A workaround for edge cases #

If you absolutely need to pass one-off data from layout to page (though this isn’t recommended for most use cases), you can use Svelte’s context API:

In +layout.svelte:

<script>
  import { setContext } from 'svelte';
  setContext('layoutContext', { currentRoute: $page.url.pathname });
</script>

{@render children()}

In +page.svelte:

<script>
  import { getContext } from 'svelte';
  const layoutContext = getContext('layoutContext');
</script>

<p>Current route from layout: {layoutContext.currentRoute}</p>

But again, stores or load functions are the idiomatic SvelteKit way to share data across layouts and pages.

内容的提问来源于stack exchange，提问作者Sam Sabin