spa_router.js:106 Uncaught TypeError: Cannot read property 'isActive' of undefined

[ralyodio]

active class not working

<header>
  <a href="/" class="logo"><img src="/logo.svg" alt="META_TITLE" border="0" /></a>
  <section>
    <p>META_DESCRIPTION</p>
    <nav>
        <a href="/news" class:active={routeIsActive('news')}>News</a>
        <a href="/social" class:active={routeIsActive('social')}>Social</a>
        <a href="/videos" class:active={routeIsActive('videos')}>Videos</a>
        <a href="/blogs" class:active={routeIsActive('blogs')}>Blogs</a>
        <a href="/podcasts" class:active={routeIsActive('podcasts')}>Podcasts</a>
        <a href="/supplies" class:active={routeIsActive('supplies')}>Supplies</a>
        <a href="/links" class:active={routeIsActive('links')}>Links</a>

    </nav>
  </section>
</header>
<script>
  import { routeIsActive } from 'svelte-router-spa'
  export let currentRoute = {};

    // import { link, push } from 'svelte-spa-router'
    // import active from 'svelte-spa-router/active'
</script>

<style>
header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0px 3px 40px rgba(0, 0, 0, 0.12);
    z-index: 2;
    padding: 0;
}

header section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

header .logo {
  padding: 0;
  margin-right: 3rem;
}

header p {
  margin: 1rem;
}

header img {
  height: 8rem;
}

nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    list-style-type: none;
    width: 100vw;
    overflow-y: auto;
    max-height: 13rem;
}

nav a {
    display: block;
    padding: 1rem;
    border: 1px solid transparent;
    color: #212121;
    font-weight: 400;
    text-decoration: none;
}

:global(nav a.active) {
    color: var(--link-color) !important;
    font-weight: 700 !important;
}

@media all and (orientation: landscape) {
    header {
        height: auto;
        flex-direction: row;
        padding: 0 11rem;
        align-items: flex-start;
    }

    nav {
        flex-direction: row;
        justify-content: flex-start;
    }

    :global(nav a.active) {
            border-bottom: 2px solid var(--active-color) !important;
    }
}
</style>

<script>
  import { Router } from 'svelte-router-spa'
  import routes from './routes';
  import Topnav from './components/Topnav.svelte';
  import Footer from './components/Footer.svelte';

  export let currentRoute = {};

</script>

<main>
    <Topnav {currentRoute} />
    <div id="body">
        <Router {routes} options={ {gaPageviews: true} } />
    </div>
    <Footer />
</main>

<style>

main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

#body {
    padding: 31rem 1rem 1rem;
  max-width: 100vw;
  margin: 0 auto;
  overflow-y: auto;
}

@media all and (orientation: landscape) {
    #body {
      padding: 1rem;
      margin-top: 11rem;
      max-width: none;
    }
}
</style>

[jorgegorka]

Hey @chovy Thank you for the very detailed explanation.

[drannex42]

Any update or method of fixing this issue?

[mylastore]

I have same issue active does not work properly

[jorgegorka]

I'll try and fix this next week @drannex42 @mylastore cc/ @chovy

[JCHHeilmann]

I'm having the same issue.

[jorgegorka]

Sorry but I can't reproduce the issue mentioned here.

Here is an example where I'm using routeIsActive and it works fine.

https://github.com/jorgegorka/demanda/blob/e7f10a5d657a156a00d70443bbc14c05ef46846c/frontend/src/views/components/admin/sidebar_item.svelte

One reason you may have the error is if you try to use routeIsActive outside of the scope of the router.

For instance:

<div>
  <header>
    <TopMenu />
  </header>
  <main>
    <Router {routes}  />
  </main>
</div>

In this scenario if you try to use routeIsActive inside the TopMenu component you will get that error because routeIsActive is outside of the router component and it doesn't know anything about any route.

Please check https://github.com/jorgegorka/svelte-router#usage for an example of how to use the Router as the main component that renders all the others.