前言

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

事件經(jīng)過

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

v6 之前的版本如何攔截

在你需要攔截的頁面添加 <Prompt /> 組件，我們在輸入框中有值，且進(jìn)行跳轉(zhuǎn)頁面時(shí)進(jìn)行攔截。當(dāng) when 為 true 時(shí)，執(zhí)行跳轉(zhuǎn)會觸發(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)要離開嗎" />
    </div>
  );
}

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

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: "確定要離開嗎",
            onOk: () => {
              history.push(location.pathname);
            },
          });
          return false;
        }}
      />
    </div>
  );
}

v6.7.0+ 如何攔截

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

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

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

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

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)離開嗎",
        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ù)請求有關(guān)。但是我覺得很難用，路由庫就應(yīng)該只專注路由，應(yīng)該跟它們的 remix 框架的發(fā)展有關(guān)吧。官方的權(quán)限控制例子也是不好用，很麻煩。下個(gè)文章會寫在 v6 中如何優(yōu)雅簡單的管理權(quán)限。

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

最新評論