mefechoel / svelte-navigator

Simple, accessible routing for Svelte

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useLocation() got triggered twice when we call navigate(-1)

billy-onggo opened this issue · comments

I encountered inconsistency on useLocation hook when programmatically navigating routes via navigate(-1) compared to history.back(-1) or hitting the browser's back button.

Is this intented? Given the current documentation states:

navigate(-1) is equivalent to hitting the back button in your browser
https://github.com/mefechoel/svelte-navigator/tree/main#parameters-1

Steps to reproduce:

  • Create nested routes within the application
  • On the parent route, create location instance of useLocation. Subscribe to the instance.
  • Navigate to any child route
  • Navigate back (programmatically) using navigate(-1)
  • Observe the useLocation() hook behavior, notice two value changes in the location instance:
    • The initial value represents the origin route.
    • The subsequent value indicates the target route.

Expected Behaviour
The navigate(-1) method should trigger the location change only once

Note:

  • Direct usage of history.go(-1) triggered the location change only once.
  • Similar results were observed when utilizing the browser's Back button.

Sample Code

<script lang="ts">
  import { Route, useNavigate, useLocation } from "svelte-navigator";
  const navigate = useNavigate()

  const location = useLocation();
  location.subscribe((l) => console.log(l))
</script>

<div>
  <h2>My Nested Route, using navigate</h2>
  <div>
    <button on:click={()=> navigate('one')}>one</button>
    <button on:click={()=> navigate('two')}>two</button>
    <button on:click={()=> navigate(-1)}>BACK</button>
    <button on:click={()=> navigate(1)}>FORWARD</button>
  </div>
  <div>
    <Route path="/one" primary={false}>Page One</Route>
    <Route path="/two" primary={false}>Page Two</Route>
  </div>
</div>

Screenshots
image

Desktop

  • OS: Linux, Ubuntu 22.04
  • Browser: observed in both Firefox and Brave