React实现路由返回拦截的三种方式

 useEffect(() => {

//这里要缓存函数返回的方法，返回的函数是解除限制函数，想解除直接调用一下
    unblockRef.current = history.block((tx, action) => {
      setTargetPathname(tx.pathname)//缓存目标路径    之所以缓存，是为了弹框点击确认的时候可以获取到
      const isBlock = history.location.pathname != tx.pathname//当跳转的目标地址不是当前地址，则拦截，只要不在当前页面就拦截
      setOpen(isBlock)
      return isBlock == true ? false : true ////返回false是阻塞， 返回true是不阻塞   注意这里和block的值正好相反
    })
    return () => {
      unblockRef.current()//  组件卸载之后要解除限制
    }
  }, [history])

<dialog className="dialog" open={open}>
  <p>确认离开么<br /></p>
  <button onClick={cancel}>取消</button>
  <button onClick={handleConfirm}>确定</button>
</dialog>

  const handleConfirm = () => {
    setOpen(false)
    if (unblockRef.current) {
      unblockRef.current();//释放限制
    }
    history.push(targetPathname)//从新跳转之前要跳转的页面
  }

   <Prompt when={isBlock} message={(location) => {
     

      if (location.pathname !== history.location.pathname) {
        setTargetPathname(location.pathname)
        setIsBlock(true)
        setOpen(true)
        return false//返回false是拦截
      } else {
        setIsBlock(false)
        return true//true是放行
      }
    }}></Prompt>

  const handleConfirm = () => {

    setIsBlock(false)
    setOpen(false)

    //需要等待锁释放之后才能跳转
    setTimeout(() => {

      history.push(targetPathname)//从新跳转之前要跳转的页面
      console.log('确认')
    }, 100)
  }

  const cancel = () => {
    setOpen(false)
  }

  <Prompt when={isBlock} message={'自定义---确定你要返回么！！！！！'}></Prompt>

  <Router

     getUserConfirmation={(message, callback) => {
       callbackRef.current = callback
       setMessage(message)
       setOpen(true)
     }
     }
   >

  const handleConfirm = () => {
    setOpen(false)
    callbackRef.current?.(true)
  }

  const cancel = () => {
    callbackRef.current?.(false)
    setOpen(false)
  }