I am new to SvelteKit and teaching myself routing.

So I have a pill button called “new notebook”, when I click on it, it does not take me to the page it is supposed to take me.

This is how I have it set up. I have an sr/components/Header.svelte file where I have the following header UI with button I refer to:

<script>
  import { goto } from "$app/navigation";
</script>

<div class="sticky top-0 z-30">
  <nav class="bg-white dark:bg-gray-800 shadow">
    <div class="max-w-7xl mx-auto px-16">
      <div class="flex items-center justify-between h-11">
        <a href="/">
          <h1 class="text-xl">redis-book</h1>
        </a>
        <div class="flex">
          <div class="flex gap-4">
            <button
              type="button"
              class="bg-gray-500 hover:bg-gray-700 disabled:bg-gray-300 py-2 px-4 flex justify-center items-center text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-full flex items-center align-center h-8"
              on:click={() => goto("/upload-notebook")}
              ><span
                class="text-center mr-1 material-icons"
                style="font-size:20px;">add</span
              >Upload Notebook</button
            >
            <button
              type="button"
              class="bg-blue-500 hover:bg-blue-700 disabled:bg-blue-300 py-2 px-4 flex justify-center items-center text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-full flex items-center align-center h-8"
              on:click={() => goto("/new-notebook")}
              ><span
                class="text-center mr-1 material-icons"
                style="font-size:20px;">add</span
              >New Notebook</button
            >
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

<style>
  .material-icons {
    font-size: 24px;
  }
</style>

Below that header I render the following from the root level +page.svelte file:

<div class="container mx-auto">
  <div class="flex justify-between mt-8 mb-1">
    <h1 class="text-3xl">Notebooks</h1>
  </div>
  <div class="text-red-400"></div>
  <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-2 overflow-x-auto">
    <div>No notebooks found - create one to get started</div>
  </div>
</div>

I believe I have this wrong because when I click on “new notebook” it does not take me to src/routes/new-notebook/+page.svelte

But if I type in /new-notebook in the url, it does take me to the new page with new header and content, but it does not hide the old header content. Should my src/components/Header.svelte be removed from there and added to the root level +page.svelte?