Sveltekit not able to retrieve URL query params

Question

I've got a page (routes/customers/+page.svelte) in which I've got two buttons:

<div class="float-right block p-5">
    <button on:click={() => addNewCustomer("individual")} class="btn btn-sm bg-primary btn-outline">+ Individual</button>
</div>
<div class="float-right block p-5">
    <a href="#" on:click={() => addNewCustomer("business")} class="btn btn-sm bg-primary btn-outline">+ Business</a>
</div>

As you can see these buttons invoke addNewCustomer:

const addNewCustomer = customerType => {
    goto(`/customers/tmp&type=${customerType}`)
}

I also have customers/tmp/+page.svelte, and in the same location I've got +page.js.

In +page.js I just want to capture type passed in the URL:

import { page } from '$app/stores';

export async function load({params}) {
    const tmp = $page.url.searchParams.get('type');
   
    console.log(params)
    console.log(tmp)
}

but this doesn't seem to work. I'm getting and error:

404
Not found: /customers/tmp&type=business
Error: Not found: /customers/tmp&type=business
    at resolve (file:///ifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/index.js:322:13)
    at Object.handle (file:///flin-ui/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:318:66)
    at respond (file:///ifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/index.js:341:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///ifflin-ui/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:376:22

If I get rid of the query in the url (/customers/tmp) my page loads correctly. What am I missing?

---

Update

As it was mentioned I should be using /customers/tmp?type=${customerType} instead of /customers/tmp&type=${customerType} (notice the use of ? instead of &, don't know how I missed that detail) yet after updating I still get the following error:

500
Cannot read properties of undefined (reading 'get')
TypeError: Cannot read properties of undefined (reading 'get')
    at load (/src/routes/customers/tmp/+page.js:4:26)
    at load_data (file:///Users/hansgruber/Desktop/webdev/projects/dundermifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:109:38)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///Users/hansgruber/Desktop/webdev/projects/dundermifflin-ui/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:203:13

seems to be related to get: const tmp = page.url.get('type'); I've tried the following as well const tmp2 = page.url.searchParams.get('type'); but still getting an error

Answer 1

The URL seems just wrong, hence the 404

/customers/tmp&type=business
vs
/customers/tmp?type=business

Also, in a JS file you cannot access stores via $ (which is a Svelte-specific auto-subscription syntax) and load can also run on the server, where you cannot access the page store at all.

If you need the URL in the load function, you can get it via the function argument:

export async function load({ url }) {
    const type = url.searchParams.get('type');
}