How to access request data in layouts and pages in Qwik City

Question

I'm creating an application Qwik and Qwik City.

I want to show something in my layout, only if it's the home page.

This is my layout.jsx:

const Layout = component$((props) => {
    // console.log(props); // I don't see anything related to request
    const isHomePage = true; // how can I know I'm inside the home page?
    return <>
         {isHomePage && <TopBar />}
         
    </>
})

score 3 · Answer 1 · answered Feb 17 '23 at 21:19

import { component$, Slot } from "@builder.io/qwik";
import { loader$, useLocation } from "@builder.io/qwik-city";

export const useUser = loader$(async ({ fail }) => {
  try {
    const res = await fetch("https://api.github.com/users/harshmangalam");
    const user = await res.json();
    return {
      user,
    };
  } catch (error) {
    return fail(500, {
      error: "Something went wrong",
    });
  }
});

export default component$(() => {
  const user = useUser();
  const {
    url: { pathname },
  } = useLocation();
  const isHomePage = pathname === "/";
  return (
    <div>
      {isHomePage && <pre>{JSON.stringify(user.value, null, 4)}</pre>}
      <Slot />
    </div>
  );
});

How to access request data in layouts and pages in Qwik City

1 Answers1