相关疑难解决方法(0)

在react-router v5中我创建了这样的历史对象：

import { createBrowserHistory } from "history";
export const history = createBrowserHistory();

然后将其传递给路由器：

import { Router, Switch, Route, Link } from "react-router-dom";
<Router history={history}>
 ... my routes
</Router>

我这样做是为了有机会在组件之外使用历史记录：

   // store action
    logout() {
        this.user = null;
        history.push('/');
    }

通过这种方式，我将逻辑移至商店，并且组件尽可能保持干净。但现在，在 React Router v6 中我不能做同样的事情。我仍然可以useNavigate()在我的组件内部使用它进行导航，但我无法创建一个navigate将其使用到我的商店中的组件。还有其他选择吗？

由于https://github.com/remix-run/react-router/issues/8139已完成并且我们进入useBlocker了 v6，有人让它工作吗？

这是我到目前为止所得到的，几乎我陷入了我完全不明白的错误

在 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 …