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:
404Not found: /customers/tmp&type=businessError: 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:
500Cannot 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 wellconst tmp2 = page.url.searchParams.get('type');
but still getting an error