T
TanStack•2y ago
quickest-silver

Shared paths for different users but requiring different search params

Ok so this might be a little niche as a use case. I have two types of users, lets say a Teacher and a student. I want my base url to show different screens for the different users. ( This is simple I can just do a if (user.type==='teacher' )return <TeacherDashboard />) But on the dashboards I'm using search params for filters on the dashboard, and the search params will be different for each users. Is there an elegant way of doing this? If not would you suggest just making one big search params and maybe lose a bit of typesafety Or Just have the base URL redirect based on user type i.e. /teacher as this separates concerns After typing this out i think the later. But I'm interested hearing other opinions
2 Replies
extended-salmon
extended-salmon•2y ago
If you want to call the API with different search params, you can handle it in a callback function which call API using the type to call different search params
quickest-silver
quickest-silverOP•2y ago
It's more i'm looking to ensure the typesaftey of the search params for the page that the user is on. https://tanstack.com/router/v1/docs/guide/search-params 
export const TeachDashboardPage = new Route({
  getParentRoute: () => authenticatedRoute,
  id: "teacher",
  component: TeachDashboard,
  validateSearch: (item) =>
    z
      .object({
        pupils: z.string(),
      })
      .parse(item),
});

export const PupilDashboardPage = new Route({
  getParentRoute: () => authenticatedRoute,
  id: "pupil",
  component: PupilDashboard,
  validateSearch: (item) =>
    z
      .object({
        classes: z.string(),
      })
      .parse(item),
});
export const TeachDashboardPage = new Route({
  getParentRoute: () => authenticatedRoute,
  id: "teacher",
  component: TeachDashboard,
  validateSearch: (item) =>
    z
      .object({
        pupils: z.string(),
      })
      .parse(item),
});

export const PupilDashboardPage = new Route({
  getParentRoute: () => authenticatedRoute,
  id: "pupil",
  component: PupilDashboard,
  validateSearch: (item) =>
    z
      .object({
        classes: z.string(),
      })
      .parse(item),
});
Search Params | TanStack Router Docs
Similar to how TanStack Query made handling server-state in your React applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. Why not just use URLSearchParams?

Did you find this page helpful?