Skip to content

Route-level pre hooks not triggered when router-level hooks are defined #120

@mbnadjib

Description

@mbnadjib

When using the component, route-level pre hooks behave inconsistently depending on how the router-level hooks prop is configured.

Actual Behavior:
When only route-level hooks are defined, they work as expected.
When both route-level and router-level hooks are defined, only the router-level hook is triggered (and twice), while route-level hooks are ignored.
When hooks={undefined} is passed to the router, route-level hooks are also not triggered.

Expected Behavior:
Route-level hooks should always be triggered regardless of the presence or absence of router-level hooks.
Router-level hooks should be triggered once per navigation, not twice.

To Reproduce

<script>
  import {Router, route} from "@mateothegreat/svelte5-router";

  const routes = [
    {
      path: "/",
      component: Home,
      hooks: {
        pre: (route) => {
          console.log('pre called from: Home')
          return true;
        }
      }
    },
    {
      path: '/about',
      component: About,
      hooks: {
        pre: (route) => {
          console.log('pre called from: About')
          return true;
        }
      }
    },
  ]

  async function pre(route) {
    console.log('pre called from: Router');
    return true
  }

  let useCase = $state('ROUTE_HOOKS_ONLY')

</script>

<div class="mt-7">
  <a use:route href="/">home</a>
  <a use:route href="/about">about</a>

  <select bind:value={useCase}>
    <option value="ROUTE_HOOKS_ONLY">ROUTE_HOOKS_ONLY</option>
    <option value="ROUTE_AND_ROUTER_HOOKS">ROUTE_AND_ROUTER_HOOKS</option>
    <option value="ROUTE_HOOKS_AND_EMPTY_ROUTER_HOOKS_PROP">ROUTE_HOOKS_AND_EMPTY_ROUTER_HOOKS_PROP</option>
  </select>
  <hr/>

  {#if useCase === 'ROUTE_HOOKS_ONLY'}
    <div>Route pre hooks works fine</div>
    <Router {routes}/>
  {:else if useCase === 'ROUTE_AND_ROUTER_HOOKS'}
    <div>Actual: Route pre hooks not triggered while router pre hook is triggered twice</div>
    <div>Expected: Route pre hooks are triggered and router pre hook is triggered once</div>
    <Router hooks={{pre}} {routes}/>
  {:else if useCase === 'ROUTE_HOOKS_AND_EMPTY_ROUTER_HOOKS_PROP'}
    <div>Actual: Route pre hooks not triggered</div>
    <div>Expected: Route pre hooks are triggered, Router hook prop should not have any effect</div>
    <Router hooks={undefined} {routes} />
  {/if}
</div>

Metadata

Metadata

Assignees

Labels

acknowledgedAcknowledged, work in progressbugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions