How to render different UI with different loader data at the same route?

[frontsideair]

I have a /dashboard route that renders differently depending on logged in user's role. Let's say it renders an <AdminDashboard /> for admin and <UserRoute /> for user. Each of these dashboards have their own data. What's the best way to compose them?

It would be really easy to have different routes for each, such as /dashboard/admin and /dashboard/user, and let /dashboard route return a redirect depending on user role, but URL is a part of UX and I wanted to solve it within these constraints.

I'll share my current solution and suggestions are welcome!

// app/components/AdminDashboard.tsx
export const loader = async () => {
  return {} // loader logic
}

export default function AdminDashboard() {
  const loaderData = useLoaderData()
  // render the page with loader data
}

// app/components/UserDashboard.tsx
// similar to AdminDashboard

// app/routes/dashboard.tsx
import AdminDashboard, { loader as adminLoader } from "~/components/AdminDashboard"
import UserDashboard, { loader as userLoader } from "~/components/UserDashboard"

export const loader = async ({req}) => {
  const userRole = await getUserRole(req)
  switch (userRole) {
    case "admin": {
      return json({ userRole, data: await adminLoader() })
    }
    case "user": {
      return json({ userRole, data: await userLoader() })
    }
    default: {
      // logout
    }
  }
}

export default Dashboard() {
  const { userRole } = useLoaderData()
  switch (userRole) {
    case "admin": {
      return <AdminDashboard />
    }
    case "user": {
      return <UserDashboard />
    }
  }
}

The way it works is, <AdminDashboard /> and <UserDashboard /> components live in /app/component directory but they follow the routes pattern by exporting their own loaders. This way rendering and loading are colocated. Since they don't live in /app/routes folder, for this pattern to work, /dashboard route acts as glue, by switching on userRole value.

Another important note is that we're not wiring loader data manually, it's nowhere in the props. We call useLoaderData in dashboard components. Since it's just React context, it just works.

I didn't annotate the types, but it works well with TypeScript, since userRole field makes the record work as a discriminated union. It correctly infers the type of data field.

What do you think? Could it be a pattern? Is there a better way to do it? Would you like it expanded into a blog post? Let me know!

[kiliman]

Your solution looks good to me. I'd probably do it a similar way.