Path parameters when navigating in dynamic routes svelte + routify

Question

I'm using svelte + vite + routify, I have problem with navigation, this is example im using image event on click to navigate

 <img
    src={data?.images?.[0]?.src}
    alt={data?.name}
    class="rounded-lg"
    on:click={() => $goto('/inapp/product/' + data?.slug)}
/>

when i click the image, it navigate to /inapp/product/%5Bslug%5D

but when i using anchor tag to navigate, it behave normal (successful navigate to /inapp/product/product-1 where product-1 is [slug] path param)

i dont think its folder structure problem because the problem is new to my experience(i have svelte and sveltekit project before)

here the package.json

{
  "name": "woo-mobile",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^3.1.2",
    "autoprefixer": "^10.4.20",
    "daisyui": "^4.12.10",
    "postcss": "^8.4.47",
    "svelte": "^4.2.19",
    "tailwindcss": "^3.4.11",
    "vite": "^5.0.0"
  },
  "dependencies": {
    "@capacitor/android": "^6.1.2",
    "@capacitor/cli": "^6.1.2",
    "@capacitor/core": "^6.1.2",
    "@capacitor/preferences": "^6.0.2",
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-regular-svg-icons": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@roxi/routify": "^3.0.0-next.234",
    "axios": "^1.7.7",
    "bits-ui": "^0.21.13",
    "clsx": "^2.1.1",
    "embla-carousel-svelte": "^8.3.0",
    "sass": "^1.78.0",
    "sass-embedded": "^1.78.0",
    "svelte-radix": "^1.1.1",
    "tailwind-merge": "^2.5.2",
    "tailwind-variants": "^0.2.1"
  }
}

i'm using node 22.0.7 (tried downgrade to 18 still error) on windows 11 x64

the folder structure for above sample code

• src

  • routes

    • inapp
      • product
        • [slug]
          • index.svelte