Wasp•2mo ago

root layout

Hi guys, im new with wasp and i was wondering if theres a way to have a layout for some routes and no layout of others? for example pages inside /app should have a common layout but /login /landing etc shouldn't. I've seen the client config example to add a root layout but that applies to every route, right? Thanks!

4 Replies

kapa.ai•2mo ago

Hi @MrCharlss. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Welcome! Your understanding is correct: currently, Wasp allows you to define a root component (layout) via the client config, but this layout will wrap all pages in your app. There is no built-in way yet to apply a layout only to certain routes or pages, such as having a layout for all /app routes but not for /login or /landing. The recommended approach for now is to use the rootComponent to wrap your entire app, and then, inside your layout component, conditionally render different layouts (or no layout) based on the current route. For example, you can check the current path and decide whether to render the layout or just the children. Here’s a simplified example:

import { useLocation } from "react-router-dom";

export default function Root({ children }) {
  const location = useLocation();
  const noLayoutRoutes = ["/login", "/landing"];
  const isNoLayout = noLayoutRoutes.includes(location.pathname);

  return isNoLayout ? children : <AppLayout>{children}</AppLayout>;
}

import { useLocation } from "react-router-dom";

export default function Root({ children }) {
  const location = useLocation();
  const noLayoutRoutes = ["/login", "/landing"];
  const isNoLayout = noLayoutRoutes.includes(location.pathname);

  return isNoLayout ? children : <AppLayout>{children}</AppLayout>;
}

This way, you can control which routes get the layout and which do not, even though Wasp itself does not yet support per-route layouts natively. There is active discussion and interest in the Wasp community about adding first-class support for layouts that can be applied to groups of routes or pages, but as of now, this feature is not available. You can follow the progress and ideas in these discussions and issues: Add support for Layouts (UI), Grouped/nested routes, and Improve frontend routing. For now, conditional rendering in your root component is the best workaround available in Wasp.
Docs: Defining a Common Layout ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @MrCharlss, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

MrCharlssOP•2mo ago

can you give me examples or recipies of how something like this can be achieved? @kapa.ai

Carlos•2mo ago

Hey @MrCharlss, yep, route layout applies to everything. If you want to add some specific layout to some routes and not to others, this is the pattern I'd use:

// Imagine we want to have a specific layout for admin dashboards

// src/layouts/admin-dashboard.jsx
export const AdminDashboardLayout = ({children}) =>
  <div>
    <p>This is an Admin Dashboard</p>
    {children}
  </div>

export const withAdminDashboardLayout = Component =>
  props =>
    <AdminDashboardLayout>
      <Component {...props} />
    </AdminDashboardLayout>

// src/pages/users-dashboard.jsx
const UserDashboard = /* whatever */

export default withAdminDashboardLayout(UserDashboard)

// Imagine we want to have a specific layout for admin dashboards

// src/layouts/admin-dashboard.jsx
export const AdminDashboardLayout = ({children}) =>
  <div>
    <p>This is an Admin Dashboard</p>
    {children}
  </div>

export const withAdminDashboardLayout = Component =>
  props =>
    <AdminDashboardLayout>
      <Component {...props} />
    </AdminDashboardLayout>

// src/pages/users-dashboard.jsx
const UserDashboard = /* whatever */

export default withAdminDashboardLayout(UserDashboard)

you'll have to add the withAdminDashboardLayout or whatever function to every route yourself though is this useful?

MrCharlssOP•2mo ago

Hey! Thanks Yeah... I used a bit different direction but this works as well! :salute_right:

Gaming

Programming

root layout

Did you find this page helpful?