如何在 React 中使用自定义警报切换标签？

Question

我正在创建一个反应路由器提示，所以在这里我想在您想要从一个选项卡切换到另一个选项卡时应用警报消息。我已经应用了警报属性，因为我已经创建了一个函数 confirmSwitchTab，但它不起作用。对此有什么建议吗？我如何发出该提示，以便当我想在每条路线中从一个选项卡切换到另一个选项卡时，它会显示消息。

    import {
  BrowserRouter as Router,
  Routes,
  Route,
  useHistory,
  Navigate
} from "react-router-dom";
import Demo from "./Demo";
import About from "./About";
import React, { useEffect } from "react";
import "./styles.css";
export default function App() {
  const [login, setLogin] = React.useState(false);
  function confirmSwitchTab() {
    //Prompt the user with a confirm message.
    var result = alert("Are you sure you want to switch tabs?");
    //If the user confirms, return true, else return false.
    if (result) {
      return true;
    } else {
      return false;
    }
  }

  return (
    <div className="App">
      <Demo />
      <button onClick={() => setLogin(!login)}>
        {login ? "LogOut" : "LogIn"}
      </button>
      <Routes>
        <Route exact path="/" element={<Home />} onLeave={confirmSwitchTab} />
        {/*Pass Props to a Component Rendered by React Router */}
        <Route
          path="/about"
          element={<About login={login} />}
          onLeave={confirmSwitchTab}
        />
        {/* if you want to navigate home page if no page found  */}
        <Route
          path="*"
          element={true ? <NotFound /> : <Navigate replace to="/" />}
        />
      </Routes>
    </div>
  );
}
function Home() {
  return <div>Home component</div>;
}

function NotFound() {
  return <div>404 Not Found Page</div>;
}

Answer 1

我认为这里对 onLeave 的工作方式存在误解 :-)

返回 true 不会“确认离开操作”。不管怎样，请假动作都会被确认。 onLeave 道具将简单地获取一个函数并在您离开页面时触发它。这个函数可以是一个提示符，就像这里一样，但是不会使用返回值。

您要实现的目标必须在页面实际离开之前完成。在你的应用程序的某个地方，你应该有一个导航菜单，你实际上在点击按钮时改变页面（通常用

history.push("My/New/Path")

)

现在这就是您要使用函数的地方。

假设你有类似的东西

<Button onClick={history.push('home')} >Home</Button>

您想在该回调中调用您的 confirmSwitchTab 函数。

你可以把它改成类似的东西

const onClick = () => {
  const userConfirmsSwith = confirmSwitchTab()
  if (userConfirmsSwith) history.push('home')
  // else you don't do anything.
}
<Button onClick={onClick}>Home</Button>

希望这有帮助，如果我的问题有误，请告诉我！

干杯