#Nested outlet not showing UI

1 messages · Page 1 of 1 (latest)

bright pagoda
#

Hi, I have a small problem with the configuration of nested routes, I cannot display the text "Test Header Outlet" in my date/route.tsx route, the loader works fine but there is no UI displayed from the layout
I have another Outlet in root.tsx and it works fine, I don't know if it's a problem with the Manual Route Configuration or if I forgot something.

Thank you !

    
//remix.config.js
routes(defineRoutes) {
  return defineRoutes(route => {
    route("booking", "routes/booking/layout.tsx", () => {
      route("", "routes/booking/route.tsx", {
        index: true
      });
      route("/date", "routes/booking/date/route.tsx");
    });
  })
}

//layout.tsx
export const LayoutBooking = () => {
  return (
    <div className="h-full w-full px-10 bg-blue-600">
      <h2>Test Header Outlet</h2>
      <Outlet />
    </div>
  );
}


// date/route.tsx
export default function DateRoute() {
  return (
    <div className="bg-gray-50 h-full">
      <h3>Header Nested</h3>
    </div>
  );
}
main cradle