useLocation() got triggered twice when we call navigate(-1)
billy-onggo opened this issue · comments
billy-onggo commented
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>
Desktop
- OS: Linux, Ubuntu 22.04
- Browser: observed in both Firefox and Brave