oaf-react-router | An accessible wrapper for React Router | Router library
kandi X-RAY | oaf-react-router Summary
kandi X-RAY | oaf-react-router Summary
An accessible wrapper for React Router.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of oaf-react-router
oaf-react-router Key Features
oaf-react-router Examples and Code Snippets
Community Discussions
Trending Discussions on oaf-react-router
QUESTION
I'm building a React single-page application, and I've noticed the scroll restoration does not appear to work as expected in Chrome (and maybe other browsers.)
On the react-router-dom github repo, they have a page that says that browsers are starting to natively handle scrolling for single page apps, and the behavior would be similar to that of a traditional non-SPA web page, if history.scrollRestoration
is set to auto
.
The behavior I need is indicated on that page:
- Scrolling up on navigation so you don't start a new screen scrolled to the bottom.
- Restoring scroll positions of the window and overflow elements on "back" and "forward" clicks (but not Link clicks!)
But I also need to disable the behavior for routes that contain tabs or a carousel.
Here's a link to Chrome's spec on the issue.
What I'm observing in Chrome Version 78.0.3904.97 (Official Build) (64-bit) for OS X, is what appears to be what I'd expect from the history.scrollRestoration
manual
setting. That is, when I'm scrolled half way down a page, and I click a link, the next page is scrolled halfway down the page, to the same point as the previous page.
I've checked the history.scrollRestoration
at various points and find it starts and stays auto
, the default,
One point of significance here is this from @TrevorRobinson's answer "the browser's automatic attempts at scroll restoration... ...mostly don't work for single-page apps..." Ok... I found consistent support for history.scrollRestoration
, but apparently browsers are crappy at actually DOING the scroll restoration. Then that should be noted here, which would have saved me time today.
Then I look up ways to do this manually, and I'm not clear of the way forward. react-router-scroll
says it's not compatible with React Router v4, but doesn't mention v5, which is current as of this question. So should I assume v5 is also not compatible?
So I look further for a way forward, and found this SO answer about how to handle scroll restoration with React Router v4... Should I assume that will work with React Router v5? Update: It does not appear to work for me in v5. I tried several configurations. I also could not get it completely working with React Router v4. I knew it came alive at least, as it was it scrolls to top on a new page, but restoration in the history does not occur.
I did also get react-router-scroll-memory working, but it does not have options for disabling scrolling on designated routes, like what would be needed for tabs or a carousel... I might just hack it to make it work.
I considered using oaf-react-router, but it says nothing in the documentation about disabling scroll restoration or scroll-to-top for certain routes. Edit: It does actually handle this, as outlined in my answer.
Is there something I've overlooked? What is the standard for dealing with this issue, because I can't be the only one who needs this feature. It seems like I'm doing something edgy and experimental, but I just need my site to scroll like a normal site.
...ANSWER
Answered 2019-Nov-15 at 04:11One way to do this is with oaf-react-router. Use the shouldHandleAction
options in the settings. The function gets passed previousLocation
and nextLocation
which you can use to determine if scroll should be reset/restored, and return false
if not.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install oaf-react-router
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page