I normally use the following to redirect to any page without using window.location.href in Sveltekit
import { goto } from '$app/navigation';
const goSomeWhere = () :void => {
goto('/')
}
But how do we make it go back to the previous page? Should I just use the vanilla JavaScript to go back?
You can go back to the previous page by using the afterNavigate lifecycle.
This can be more reliable than @Jarduilno's suggestion as not every incoming link is in the same parent path.
store the pathname from the from URL object, and use it later in a function. ex: goto(previousPage)
import { goto, afterNavigate } from '$app/navigation';
import { base } from '$app/paths'
let previousPage : string = base ;
afterNavigate(({from}) => {
previousPage = from?.url.pathname || previousPage
})
You can use the javaScript history object like this history.back();
in our SvelteKit project we are sometimes navigating to previous page like in the example bellow
import { goto } from '$app/navigation';
import { page } from '$app/stores';
const goSomeWhereBack = () => {
goto($page.url.pathname.substring(0, $page.url.pathname.lastIndexOf('/')));
}
You can made use of the navigating store from $app/stores.
import { navigating } from "$app/stores";
export const previousPage = readable(null, (set) => {
const unsubscribe = navigating.subscribe(($navigating) => {
// Check if `$navigating` has a value
// because it's set to `null` after navigation is done
if ($navigating) {
set($navigating.from.url.pathname);
}
});
return () => unsubscribe();
});
Keep in mind that this store is keeping track of the previously opened page and is not a stack. So calling goto($previousPage) multiple times one after the other will get you stuck in a loop.
Alternatively, if you want to use the History API instead (which uses a stack), you can just call history.back() as mentioned in this answer.
I found a hacky solution, you can use window.history.back() and then after some time call goto(window.location.href). This triggers re-render(?) which I needed because otherwise simple window.history.back() didn't work.
window.history.back();
setTimeout(() => goto(window.location.href), 100)
