feat: useLocation is missing necessary functions, such as router.go/router.replace
Closed this issue · 7 comments
When using Vue Router or React Router, it's possible to navigate back to the previous page. However, the current useLocation().route() method only adds to the browser's navigation history, which can lead to incorrect behavior when users utilize the browser's own navigation tools.
For example:
useLocation().route('/edit')// go to edit pageuseLocation().route('/')// go back
Expected routing history:
['/']
Actual routing history:
['/', '/edit', '/']
When the user clicks the browser's back button, they are taken back to the edit page, which is unexpected.
Perhaps it could be similar to the navigate function in react-router-dom, which supports passing in a number, like -1. ref: https://reactrouter.com/en/main/hooks/use-navigate
Don't necessarily love the "pass in a number" API, but we could mirror preact-router's API here, where route() has a second replace param:
It's not quite the same, replace is a different thing; it replaces rather than adds or deletes routes. For example:
route('/edit', { replace: true })// go to edit pageroute('/', { replace: true })// go back
This way, the expected route history of ['/'] is achieved, but if the browser's back button is used after the first step, it results in incorrect behavior, failing to go back to the home page. replace deals with another scenario, not the one where you want to return to the previous page.
Both React and Vue have similar functionalities, for reference:
- React: https://reactrouter.com/en/main/hooks/use-navigate#optionsunstable_flushsync:~:text=stack.%20For%20example%2C-,navigate(%2D1),-is%20equivalent%20to
- Vue: https://router.vuejs.org/guide/essentials/navigation.html#Traverse-history
In Svelte, using history.back seems to be the recommended approach, for reference: https://stackoverflow.com/questions/68187584/how-to-route-programmatically-in-sveltekit
Wait, it seems that Preact also supports history.back. Okay, then indeed implementing replace is sufficient.
Sorry, that was unclear.
While I fully understand the behavior is different, it's something I don't think we should support and is something that extremely rarely provides the right UX. 99% of the time, it's going to be confusing to the user that they've seemingly been sent back a page, often leading them to think they pressed a button accidentally. Routing should send the user forward or replace the current page, not backwards, IMO.
Indeed, history.back() should work if you need it.
route(url, replace) is something we should support, however.
route(url, replace)is something we should support, however
You're right. Would you like to implement it? Or I can also try to get familiar with preact-router and attempt to reimplement it here.
Need this as well. I opened (and closed after discovering this one 😅 ) a similar feature request for the replace function.
Somebody already working on this?
PRs welcome, if anyone wants to contribute.
I think route(url: string, replace: boolean) is the preferred API, it matches preact-router's route()
Published as 2.4.0, thanks for bearing with me!