indigo.snowboll
indigo.snowboll
PostsComments
SSolidJS
Created by indigo.snowboll on 4/28/2025 in #support
Same route for private and protected content
Hi, Is there a way to have a single route show different content depending on the user being logged in or not? I came up with this, but I'm pretty sure it's incorrect: 
export default function PublicLayout(props: RouteSectionProps) {
  const user = createAsync(() => getUser());
  const location = useLocation();

  return (
    <MetaProvider>
      <Switch
        fallback={
          {/* Public content */}
          <Suspense>{props.children}</Suspense>
        }
      >
        <Match when={location.pathname === '/' && !user()}>
          {/* Public home page */}
          <Suspense><HeroPage /></Suspense>
        </Match>
        <Match when={location.pathname === '/' && user()}>
          {/* Protected home page */}
          <Suspense><Home /></Suspense>
        </Match>
      </Switch>
    </MetaProvider>
  );
}
export default function PublicLayout(props: RouteSectionProps) {
  const user = createAsync(() => getUser());
  const location = useLocation();

  return (
    <MetaProvider>
      <Switch
        fallback={
          {/* Public content */}
          <Suspense>{props.children}</Suspense>
        }
      >
        <Match when={location.pathname === '/' && !user()}>
          {/* Public home page */}
          <Suspense><HeroPage /></Suspense>
        </Match>
        <Match when={location.pathname === '/' && user()}>
          {/* Protected home page */}
          <Suspense><Home /></Suspense>
        </Match>
      </Switch>
    </MetaProvider>
  );
}
Any hints welcome!
16 replies