Usando react sin breeze podía englobar varias rutas del reactrouter con un layout padre, lo que permitía que las paginas cambien renderizando solo la page, y el layout no recargaba. Ahora como estoy usando react dentro de breeze y no tiene router, laravel se encarga en el web.php de renderizar las rutas con inertia. No se como generar el comportamiento con un padre Layout que englobe multiples pages
1 respuesta
en el archivo donde esta la configuracion que se llama resources/js/app.js, puedes hacer algo asi
import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import Layout from "./Layouts/Layout";
const appName = "prueba";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: async (name) =>
resolvePageComponent(
`./Paginas/${name}.tsx`,
import.meta.glob("./Paginas/**/*.tsx")
),
setup({ el, App, props }) {
createRoot(el).render(
<Layout>
<App {...props} />
</Layout>);
},
progress: {
color: "#4B5563",
},
});
donde en el setup, puedes envolver a app y aplicar tu layout
-
Muchas gracias por tu ayuda, me fue de utilidad. Cómo podria hacer para englobar conjuntos de páginas con diferente Layout? por ejemplo que haya algunas con el Layout de AdminLayout y otras con GuestLayout. Muchas gracias nuevamente Commented el 25 dic. 2023 a las 2:37
-
podrías hacer un condicional donde usando el hook usepage, obtener la url actual y asi decidir que layout utilizar en base a la url– TehzCommented el 25 dic. 2023 a las 2:40
-
Gracias, intente hacerlo pero el hook usePage solo me deja ejecutarlo en componentes o layouts, podria crear un layout nuevo con ese condicional pero por cada cambio de pagina se renderizaria nuevamente el layout entero, aunque utilice el mismo. Commented el 25 dic. 2023 a las 3:42