Estoy tratando de crear una barra de navegación de actualización dinámica en SvelteKit, con la sección actualmente abierta formateada en consecuencia. Estoy tratando de identificar la página en función de la primera parte de la ruta, como se muestra a continuación:
__layout.svelte :
<script context="module"> export const load = ({ page }) => { return { props: { currentSection: `${page.path}`.split('/')[0], sections: ['home', 'dashboard', 'settings'] } }; } </script> <div class="min-h-screen bg-gray-100"> <Header {...props} /> <slot /> </div> Header.svelte
<script> import Menu from "$lib/nav/menu.svelte" </script> <Menu {...props}></Menu> Menu.svelte
<script> export let sections; export let currentSection; </script> {#each sections as { section }} <a href="/{section}" class="{section == currentSection ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700'} other-classes" >{section}</a > {/each} Esto está dando como resultado un error de props is not defined , pero hubiera esperado que se definieran los accesorios ya que lo he definido en el retorno de la función load() en el diseño principal (basado en los documentos ).
¿De alguna manera necesito declarar explícitamente los accesorios en lugar de esperar que estén disponibles desde el retorno de la función load() ?
Los props se pasan de la secuencia de comandos del módulo a la secuencia de comandos del componente regular, lo que significa que aún necesita agregar export let props en su diseño también.
<script context="module"> export const load = () => { return { props: { test: 123 } } } </script> <script> export let test; // </script> Tenga en cuenta que esto siempre distribuirá los accesorios, no puede export let props y recuperar todos los accesorios , sin embargo, puede pasar todos los accesorios a un componente usando $$props
Además, la función de carga solo está disponible para páginas y diseños, por lo que seguramente tendrá que exportar accesorios tanto en el encabezado como en el menú, ya que son solo componentes esbeltos regulares.