title: How to Create Route Links with Svelte Routify
body: <p>I am learning how to use Routify to wire up some routes and links. I need help.</p>
  <p>At the Routify docs it says:</p>
  <p>&quot;Links can be handled in an array of different ways. This might be the easiest way&quot;.</p>
  <p>via:  <a href="https://routify.dev/guide/navigation" rel="nofollow noreferrer">https://routify.dev/guide/navigation</a></p>
  <p>It then gives this example:</p>
  <pre><code>&lt;script&gt;
    import {isActive, url} from '@sveltech/routify'
  
    const links =
    [
      ['./index', 'Home'], //add index if you don't want siblings to be considered children
      ['./blog', 'Blog'],
      ['./about', 'About'],
      ['./contact', 'Contact']
    ]
  &lt;/script&gt;
  
  &lt;style&gt;
    .active {font-weight: bold}
  &lt;/style&gt;
  
  &lt;ul&gt;
    {#each links as [path, name]}
      &lt;!-- Svelte magic. If isActive is true, the &quot;active&quot; class is applied. --&gt;
      &lt;li class:active={$isActive(path)}&gt;
        &lt;a href={$url(path)}&gt;
          {name}
        &lt;/a&gt;
      &lt;/li&gt;
    {/each}
  &lt;/ul&gt;
  
  </code></pre>
  <p>Unfortunately it doesn't give any instructions on how to wire this up to your app (if it does it's too complex for me to figure out).</p>
  <p>I am using the Routify Template and I have copied the above code into the following directory:</p>
  <p><strong>pages/_components/Navigation.svelte</strong></p>
  <p>I then attempted to import it into pages/index.svelte as so:</p>
  <p><strong>pages/index.svelte</strong></p>
  <pre><code> &lt;script&gt;
  
    import Navigation from './_components/Navigation.svelte';
  
  &lt;/script&gt;
  
  &lt;div&gt;
    &lt;Navigation/&gt;
  
  
  &lt;/div&gt;
  
  </code></pre>
  <p>The links appear at the top of the page. When I click them the endpoint follows this pattern:</p>
  <pre><code>http://localhost:5000/index/home
  
  http://localhost:5000/index/blog
  
  http://localhost:5000/index/about
  
  http://localhost:5000/index/contact
  </code></pre>
  <p>In my <strong>/pages</strong> directory I have pages that match the pages listed in the code such as:</p>
  <p><strong>/pages/Home.svelte</strong></p>
  <p>When I click the links my browser stays on the same page and does not embed the page associated with the link. Also, my browser developer tools say:</p>
  <pre><code>Uncaught Error: Route could not be found for &quot;/index/home&quot;.
      at urlToRoute (urlToRoute.js:15)
      at updatePage (navigator.js:13)
      at pushstate (navigator.js:60)
      at History.history.&lt;computed&gt; [as pushState] (navigator.js:51)
  </code></pre>
  <p>What do I need to do so that I can see the respective pages and why is their an intermediate directory named &quot;index&quot;? How do I get rid of the word &quot;index&quot; in the url ?</p>
  <hr />
  <p><strong>UPDATE</strong></p>
  <p>Okay I have the navigation listed on all pages and semi-working.</p>
  <p>I have my <strong>Navigation</strong> code (below) imported into <strong>pages/_layout.svelte</strong>.</p>
  <p>The code is as follows:</p>
  <p><strong>pages/_layout.svelte</strong></p>
  <pre><code>&lt;script&gt;
      import Navigation from './_components/Navigation.svelte';
  &lt;/script&gt;
  
  &lt;!--TABS--&gt;
  
  &lt;Navigation/&gt;
  
  </code></pre>
  <p><strong>pages/_components/Navigation.svelte</strong></p>
  <pre><code>
  &lt;script&gt;
    import {isActive, url} from '@sveltech/routify'
  
    const links =
    [
      ['./index', 'Home'], //add index if you don't want siblings to be considered children
      ['./form', 'Form']
    ]
  &lt;/script&gt;
  
  &lt;style&gt;
    .active {font-weight: bold}
  &lt;/style&gt;
  
  &lt;ul&gt;
    {#each links as [path, name]}
      &lt;!-- Svelte magic. If isActive is true, the &quot;active&quot; class is applied. --&gt;
      &lt;li class:active={$isActive(path)}&gt;
        &lt;a href={$url(path)}&gt;
          {name}
        &lt;/a&gt;
      &lt;/li&gt;
    {/each}
  &lt;/ul&gt;
  
  </code></pre>
  <p>The navigation links appear but the problem now is that the content of the selected page does not appear.</p>
  <p>In the image below, the form endpoint is being rendered. The form component has working HTML but the HTML does not appear on the page.</p>
  <p>I am also getting a warning my my developer tools that says: &quot; received an unexpected slot &quot;default&quot;</p>
  <p><a href="https://i.stack.imgur.com/pUOfV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pUOfV.png" alt="enter image description here" /></a></p>