Path parameters when navigating

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