Breaking News: Grepper is joining You.com. Read the official announcement!

prompt react router v6

Chinedu Otutu answered on October 20, 2022 Popularity 8/10 Helpfulness 3/10

answer prompt react router v6

related prompt react router v6

prompt react router v6

Comment

import React, { useEffect, useState, useCallback } from 'react'
 import { useNavigate, useBlocker, useLocation } from 'react-router-dom'

 export default function withPreventNavigation(WrappedComponent) {
   return function preventNavigation(props) {
     const navigate = useNavigate()
     const location = useLocation()
     const [lastLocation, setLastLocation] = useState(null)
     const [confirmedNavigation, setConfirmedNavigation] = useState(false)
     const [shouldBlock, setShouldBlock] = useState(false)

    let handleLeave = null

     const cancelNavigation = useCallback(() => {
       setshouldBlock(false)
     },[])

     const handleBlockedNavigation = useCallback(
       nextLocation => {
         if (
           !confirmedNavigation &&
           nextLocation.location.pathname !== location.pathname
         ) {
           handleLeave(nextLocation)
           setLastLocation(nextLocation)
           return false
         }
         return true
       },
       [confirmedNavigation]
     )

     const confirmNavigation = useCallback(() => {
       setConfirmedNavigation(true)
     }, [])

     useEffect(() => {
       if (confirmedNavigation && lastLocation) {
         navigate(lastLocation.location.pathname)
       }
     }, [confirmedNavigation, lastLocation])

     const provideLeaveHandler = handler => {
       handleLeave = handler
     }

     useBlocker(handleBlockedNavigation, shouldBlock)

     return (
       <WrappedComponent
         {...props}
         provideLeaveHandler={provideLeaveHandler}
         setPreventNavigation={setShouldBlock}
         confirmNavigation={confirmNavigation}
         cancelNavigation={cancelNavigation} />
     )
   }
 }

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript prompt react-router

Link to this answer
Share Copy Link

Contributed on Oct 20 2022

Chinedu Otutu

0 Answers Avg Quality 2/10

Closely Related Answers

prompt react router v6

Comment

import React, { useEffect, useState, useCallback } from 'react'
 import { useNavigate, useBlocker, useLocation } from 'react-router-dom'

 export default function withPreventNavigation(WrappedComponent) {
   return function preventNavigation(props) {
     const navigate = useNavigate()
     const location = useLocation()
     const [lastLocation, setLastLocation] = useState(null)
     const [confirmedNavigation, setConfirmedNavigation] = useState(false)
     const [shouldBlock, setShouldBlock] = useState(false)

    let handleLeave = null

     const cancelNavigation = useCallback(() => {
       setshouldBlock(false)
     },[])

     const handleBlockedNavigation = useCallback(
       nextLocation => {
         if (
           !confirmedNavigation &&
           nextLocation.location.pathname !== location.pathname
         ) {
           handleLeave(nextLocation)
           setLastLocation(nextLocation)
           return false
         }
         return true
       },
       [confirmedNavigation]
     )

     const confirmNavigation = useCallback(() => {
       setConfirmedNavigation(true)
     }, [])

     useEffect(() => {
       if (confirmedNavigation && lastLocation) {
         navigate(lastLocation.location.pathname)
       }
     }, [confirmedNavigation, lastLocation])

     const provideLeaveHandler = handler => {
       handleLeave = handler
     }

     useBlocker(handleBlockedNavigation, shouldBlock)

     return (
       <WrappedComponent
         {...props}
         provideLeaveHandler={provideLeaveHandler}
         setPreventNavigation={setShouldBlock}
         confirmNavigation={confirmNavigation}
         cancelNavigation={cancelNavigation} />
     )
   }
 }

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: react-router prompt javascript react

Link to this answer
Share Copy Link

Contributed on Oct 20 2022

Chinedu Otutu

0 Answers Avg Quality 2/10

prompt react router v6

Contents

More Related Answers

prompt react router v6

Closely Related Answers

prompt react router v6

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.