oaf-react-router | An accessible wrapper for React Router | Router library

 by   oaf-project TypeScript Version: 2.0.0 License: MIT

kandi X-RAY | oaf-react-router Summary

kandi X-RAY | oaf-react-router Summary

oaf-react-router is a TypeScript library typically used in Networking, Router, React applications. oaf-react-router has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.

An accessible wrapper for React Router.
Support
    Quality
      Security
        License
          Reuse

            kandi-support Support

              oaf-react-router has a low active ecosystem.
              It has 63 star(s) with 3 fork(s). There are 1 watchers for this library.
              OutlinedDot
              It had no major release in the last 12 months.
              There are 3 open issues and 24 have been closed. On average issues are closed in 356 days. There are 1 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of oaf-react-router is 2.0.0

            kandi-Quality Quality

              oaf-react-router has no bugs reported.

            kandi-Security Security

              oaf-react-router has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

            kandi-License License

              oaf-react-router is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              oaf-react-router releases are not available. You will need to build from source code and install.
              Installation instructions are not available. Examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of oaf-react-router
            Get all kandi verified functions for this library.

            oaf-react-router Key Features

            No Key Features are available at this moment for oaf-react-router.

            oaf-react-router Examples and Code Snippets

            No Code Snippets are available at this moment for oaf-react-router.

            Community Discussions

            Trending Discussions on oaf-react-router

            QUESTION

            How to implement scroll restoration for React Router SPA
            Asked 2019-Nov-17 at 21:19

            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:

            1. Scrolling up on navigation so you don't start a new screen scrolled to the bottom.
            2. 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:11

            One 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.

            Source https://stackoverflow.com/questions/58772954

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network

            Vulnerabilities

            No vulnerabilities reported

            Install oaf-react-router

            You can download it from GitHub.

            Support

            Another native browser feature that React Router doesn't emulate is scrolling to the element identified by the hash fragment in a URL. For example, if you load https://en.wikipedia.org/wiki/Firefox#Performance, your browser will scroll down to the <span id="Performance"> automatically. There are other libraries that tackle this issue—for example rafrex/react-router-hash-link—but they typically only address scroll to the exclusion of focus (there's that theme again). Oaf React Router implements this for you, taking care of both focus and scroll. A caveat here is that the identified element must exist in the DOM straight after the route is rendered. If the element won't exist for some time, e.g. until after an API response, then Oaf React Router won't focus or scroll to it, falling back on the primary focus target.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
            Install
            Maven
            Gradle
            CLONE
          • HTTPS

            https://github.com/oaf-project/oaf-react-router.git

          • CLI

            gh repo clone oaf-project/oaf-react-router

          • sshUrl

            git@github.com:oaf-project/oaf-react-router.git

          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Explore Related Topics

            Consider Popular Router Libraries

            react-router

            by remix-run

            react-router

            by ReactTraining

            vue-router

            by vuejs

            mux

            by gorilla

            ui-router

            by angular-ui

            Try Top Libraries by oaf-project

            oaf-side-effects

            by oaf-projectTypeScript

            oaf-routing

            by oaf-projectTypeScript

            oaf-bootstrap-4

            by oaf-projectCSS

            oaf-svelte-routing

            by oaf-projectTypeScript

            oaf-vue-router

            by oaf-projectTypeScript