umi4 如何监听 离开当前页面

[hihuangwei]

umi4 如何监听 离开当前页面

[fz6m]

history.listen 或者 onRouteChange

[hihuangwei]

umi3 有 Prompt，umi4 有类似的方法吗

[fz6m]

react router v6 去掉 Prompt 了。

is not currently supported

目前有一个旧版实现可以用，但正如上述文章中所述，这个实现不成熟：

import React from 'react'
import { history } from 'umi'

type Blocker = Parameters<typeof history.block>[0]

function useBlocker(blocker: Blocker, when = true): void {
  React.useEffect(() => {
    if (!when) return

    let unblock = history.block((tx) => {
      let autoUnblockingTx = {
        ...tx,
        retry() {
          // Automatically unblock the transition so it can play all the way
          // through before retrying it. TODO: Figure out how to re-enable
          // this block if the transition is cancelled for some reason.
          unblock()
          tx.retry()
        },
      }

      blocker(autoUnblockingTx)
    })

    return unblock
  }, [navigator, blocker, when])
}

export function usePrompt(message: string, when = true) {
  let blocker: Blocker = React.useCallback(
    (tx) => {
      if (window.confirm(message)) tx.retry()
    },
    [message]
  )

  useBlocker(blocker, when)
}

export interface PromptProps {
  message: string
  when?: boolean
}

export function Prompt({ message, when }: PromptProps) {
  usePrompt(message, when)
  return null
}

这是从 react router v6.0.0-beta 中 copy 出来的，我也不知道哪里不成熟。

[blackcorgi]

看了下react-router的更新，在6.7版本已经加回来了，目前是不稳定版本。

另外：umi考虑升级么？

[hasakilol]

+1

[fz6m]

如有需要监听页面离开的相关需求，使用如上 #10237 (reply in thread) 回复中的 usePrompt / <Prompt /> 即可。