title: How to Make Relative Href Work in SvelteKit?
body: <p>I want to build a Web app with SvelteKit with one page listing all items (with potential search query parameters), and then one page for each individual item. If I had to build this the old school way with everything generated in the backend, my paths would be <code>/items/</code> for a the listing of items, and <code>/items/123</code> for item <code>123</code>, etc. That is, to go to the page of item <code>123</code>, a link will with <code>href=&quot;123&quot;</code> will work no matter if you are currently at the index (<code>/items/</code>) or at the page of one particuler item (<code>/items/[id]</code>).</p>
  <p>With SvelteKit, if I create files <code>routes/items/index.svelte</code> and <code>routes/items/[id].svelte</code>, then <code>routes/items/index.svelte</code> will have path <code>/items</code>, <strong>without</strong> a trailing slash, and as a result a link with <code>href=&quot;123&quot;</code> will lead to <code>/123</code>, resulting in a &quot;not found&quot; error.</p>
  <p>This same link will work however from the page of an individual item, say, <code>/items/456</code>.</p>
  <p>This is radically different from what you would have in the traditional HTML model, where a link from <code>/items/</code> (or <code>/items/index.html</code>) would work the same as a link from <code>/items/[id].html</code>.</p>
  <p>Now in <code>svelte.config.js</code> there is a <code>trailingSlash</code> option you can set to <code>always</code> so that <code>routes/items/index.svelte</code> corresponds to path <code>/items/</code>, but then <code>routes/items/[id].svelte</code> has path <code>/items/[id]/</code> and we have the same problem again: one <code>href</code> value cannot work from both the index and the page of an individual item.</p>
  <p>The only way I see right now is to use absolute path, but it's not very composable. My guess is that there is something I am doing wrong.</p>