React Router Dom - v6 - useBlocker

Question

由於https://github.com/remix-run/react-router/issues/8139已經完成並且我們在 v6 中得到了useBlocker ，有人讓它工作了嗎？

這是我到目前為止所得到的，而且我幾乎陷入了錯誤，我完全不明白

在 App.js 中，我有我的BrowserRouter ，所有東西都被包裹在里面

我還使用了實施者要點中的示例（我復制粘貼）

import * as React from "react";
import { useBeforeUnload, unstable_useBlocker as useBlocker } from "react-router-dom";

function usePrompt(message, { beforeUnload } = {}) {

let blocker = useBlocker(
  React.useCallback(
     () => (typeof message === "string" ? !window.confirm(message) : false),
  [message]
  )
);
let prevState = React.useRef(blocker.state);

React.useEffect(() => {
    if (blocker.state === "blocked") {
    blocker.reset();
  }
  prevState.current = blocker.state;
}, [blocker]);

useBeforeUnload(
     React.useCallback(
       (event) => {
         if (beforeUnload && typeof message === "string") {
          event.preventDefault();
          event.returnValue = message;
         }
      },
      [message, beforeUnload]
    ),
  { capture: true }
 );
}

function Prompt({ when, message, ...props }) {
    usePrompt(when ? message : false, props);
    return null;
}

然后在我的組件中，我這樣調用Prompt

const MyComponent = (props) => {
    const [showPrompt, setShowPrompt] = useState(false)

    ...

    return (
        ...
        <Prompt when={showPrompt} 
                message="Unsaved changes detected, continue?" 
                beforeUnload={true} 
        />
    )
}

在MyComponent的頁面加載中，我不斷收到錯誤消息

Error: useBlocker must be used within a data router.  See 
    https://reactrouter.com/routers/picking-a-router.
     at invariant (history.ts:308:1)
     at useDataRouterContext (hooks.tsx:523:1)
     at useBlocker (hooks.tsx:723:1)
     at usePrompt (routerCustomPrompt.js:8:1)
     at Prompt (routerCustomPrompt.js:37:1)

有沒有人在新版本中使用useBlocker來工作？

Answer 1

錯誤信息相當清楚。 為了使用useBlocker掛鈎，它必須在數據路由器呈現的組件中使用。 請參閱選擇路由器。

例子：

const MyComponent = (props) => {
  const [showPrompt, setShowPrompt] = useState(false);

  ...

  return (
    ...
    <Prompt
      when={showPrompt} 
      message="Unsaved changes detected, continue?" 
      beforeUnload={true} 
    />
  );
}

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      {/* ... etc. */}
      <Route path="myComponent" element={<MyComponent />} />
      {/* ... etc. */}
    </Route>
  )
);

const App = () => <RouterProvider router={router} />;