前言

路由的跳轉(zhuǎn)攔截，在一些表單頁(yè)中尤為常見(jiàn)。場(chǎng)景：用戶輸入了一些信息后但未提交，為了防止用戶誤點(diǎn)擊某個(gè)跳轉(zhuǎn)鏈接導(dǎo)致所填的表單信息丟失，跳轉(zhuǎn)之前會(huì)彈出一個(gè)提示，如 “信息未提交，請(qǐng)確認(rèn)是否離開(kāi)” 等字樣。

事件經(jīng)過(guò)

在 react-router v6 之前有提供一個(gè) <Prompt /> 組件來(lái)攔截路由的跳轉(zhuǎn)。而在 v6 中卻不支持此功能了！社區(qū)一片哀嚎，經(jīng)查在 v6 實(shí)驗(yàn)階段是有此功能的，但在 v6.0.0 beta-7 中刪除了此功能。在這個(gè) issue 鏈接 中每個(gè)人都強(qiáng)烈要求需要此功能，但官方回復(fù)會(huì)在不久的將來(lái)添加，有需要的可以回退到 v5，基本所有人都表示 ??。然而這一等就是一年多，很多人這期間在 issue 中表示非常失望，這個(gè)不久的將來(lái) 到底還有沒(méi)有了？終于在 v6.7.0 重新加入了此功能，原來(lái)不久的將來(lái)約等于一年。

v6 之前的版本如何攔截

在你需要攔截的頁(yè)面添加 <Prompt /> 組件，我們?cè)谳斎肟蛑杏兄?，且進(jìn)行跳轉(zhuǎn)頁(yè)面時(shí)進(jìn)行攔截。當(dāng) when 為 true 時(shí)，執(zhí)行跳轉(zhuǎn)會(huì)觸發(fā)攔截操作，message 為提示。

function Home() {
  const [value, setValue] = useState("");
  return (
    <div>
      <Link to="/about" />
      <input value={value} onChange={e => setValue(e.target.value)} />
      <Prompt when={!!value} message="確認(rèn)要離開(kāi)嗎" />
    </div>
  );
}

彈出的提示進(jìn)行自定義，when 可以設(shè)置為一個(gè)函數(shù)，參數(shù)為 location 和 action(行為)，返回 string | boolean。返回 string 或 true 就是直接離開(kāi)了。

function Home() {
  const [value, setValue] = useState("");
  const history = useHistory();
  return (
    <div>
      <Link to="/about" />
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <Prompt
        when={!!value}
        message={(location, action) => {
          Modal.confirm({
            message: "確定要離開(kāi)嗎",
            onOk: () => {
              history.push(location.pathname);
            },
          });
          return false;
        }}
      />
    </div>
  );
}

v6.7.0+ 如何攔截

在這個(gè)版本中提供了一個(gè) unstable_useBlocker 鉤子，但在文檔中是沒(méi)有的（艸），需要自己去 examples 里找。useBlocker 傳入的參數(shù)類似于上面的 when。

useBlocker 的參數(shù)為 boolean 或 函數(shù)返回 boolean，函數(shù)的類型如下：

(args: {
    currentLocation: Location;
    nextLocation: Location;
    historyAction: HistoryAction;
}) => boolean

blocker 里的 state 為 blocked 時(shí)，說(shuō)明當(dāng)前正在進(jìn)行攔截，此時(shí)彈出一個(gè) Modal，點(diǎn)擊確認(rèn)就是進(jìn)行跳轉(zhuǎn)，點(diǎn)擊取消就是不跳轉(zhuǎn)。blocked 中還能獲取到 location，可以根據(jù)你的需要來(lái)使用。

import { unstable_useBlocker as useBlocker } from "react-router-dom";
function Home() {
  const [value, setValue] = useState("");
  const blocker = useBlocker(!!value);
  useEffect(() => {
    if (blocker.state === "blocked") {
      Modal.confirm({
        message: "確認(rèn)離開(kāi)嗎",
        onOk: () => {
          blocker.proceed?.();
        },
        onCancel: () => {
          blocker.reset?.();
        },
      });
    }
  }, [blocker]);
  return (
    <div>
      <Link to="/about" />
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}

吐槽

最后，就在這里吐槽一下吧。文檔很爛，不支持搜索！且 v6.4 的后續(xù)版本中加入了很多 api，例如 action 和 loader 的概念，跟數(shù)據(jù)請(qǐng)求有關(guān)。但是我覺(jué)得很難用，路由庫(kù)就應(yīng)該只專注路由，應(yīng)該跟它們的 remix 框架的發(fā)展有關(guān)吧。官方的權(quán)限控制例子也是不好用，很麻煩。下個(gè)文章會(huì)寫在 v6 中如何優(yōu)雅簡(jiǎn)單的管理權(quán)限。

以上就是react-router 重新加回跳轉(zhuǎn)攔截功能詳解的詳細(xì)內(nèi)容，更多關(guān)于react router 跳轉(zhuǎn)攔截的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！