search

frontarm / navi

🧭 Declarative, asynchronous routing for React.
https://frontarm.com/navi/
MIT License
2.07k stars 71 forks source link

<Link> scrolls to top on mobile #172

Closed bouiboui closed 1 year ago

bouiboui commented 4 years ago

Hi, on mobile, when I click on <Link> elements, the window scrolls to the top of the page, but what I really want is to update the history without scrolling.

If I replace the Link element with:

<button onClick={() => window.history.pushState(null, document.title, linkProps.href)}>

I get close to what I really want (but it's dirty).

Do you know any way to prevent this behaviour?

Thank you.

jamesknelson commented 4 years ago

This is currently the expected behavior, as Navi is mainly focused at websites.

I'm curious – are you using Navi to build an app instead of a mobile web site? If so, I can see how this behavior may get in the way. I'm not sure off the top of my head how I'd fix this, but it may make sense to add some sort of configuration option...

bouiboui commented 4 years ago

Thanks for your answer, I'm using it on a website where there is a list of items, each item has a button that opens a modal, when I open the modal I want the URL to change to the item's own URL. When I close the modal, I want the URL to change back to the list URL.

But when there's hundred of items and you scrolled to the bottom of the list, clicking on the modal open button brings you back to the top of the list, which is unfortunate.

jamesknelson commented 4 years ago

I see, that makes sense. I'm not exactly sure of the best way to go about this.

I'm personally of the opinion that modals usually shouldn't have their own URLs, but I can also see how others may come to a different conclusion. Perhaps it would make sense to add some sort of prop to that disabled scrolling?

bouiboui commented 4 years ago

Do other routers provide the option / act like this?