react-router?重新加回跳轉(zhuǎn)攔截功能詳解

更新時間：2023年02月08日 14:37:52 作者：馬格納斯

這篇文章主要為大家介紹了react-router?重新加回跳轉(zhuǎn)攔截功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

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

事件經(jīng)過

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

v6 之前的版本如何攔截

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

彈出的提示進行自定義，when 可以設置為一個函數(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+ 如何攔截

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

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

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

blocker 里的 state 為 blocked 時，說明當前正在進行攔截，此時彈出一個 Modal，點擊確認就是進行跳轉(zhuǎ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: "確認離開嗎",
        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ù)請求有關。但是我覺得很難用，路由庫就應該只專注路由，應該跟它們的 remix 框架的發(fā)展有關吧。官方的權限控制例子也是不好用，很麻煩。下個文章會寫在 v6 中如何優(yōu)雅簡單的管理權限。

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

您可能感興趣的文章: