0

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 1

0

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

3
  • 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
    – Tehz
    Commented 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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.