React에서 맞춤 알림을 사용하여 탭을 전환하는 방법은 무엇입니까?

Question

만들고 있는데 react-router 提示，所以在这里我想在您想从一个选项卡切换到另一个选项卡时应用警报消息。我已经应用了警报属性，因为我创建了一个函数 confirmSwitchTab 작동하지 않습니다. 각 경로에서 한 탭에서 다른 탭으로 전환하려고 할 때 메시지가 표시되도록 하려면 어떻게 해야 합니까?

import { React, useState } from "react";
import { Link } from "react-router-dom";
import LoadingBar from "react-top-loading-bar";
import { useNavigate } from "react-router-dom";

export default function Demo() {
  const [progress, setProgress] = useState(0);
  const navigate = useNavigate();

  function confirmSwitchTab() {
    //Prompt the user with a confirm message.
    var result = confirm("Are you sure you want to switch tabs?");
    //If the user confirms, return true, else return false.
    if (result) {
      return true;
    } else {
      return false;
    }
  }

  const onClick = () => {
    const userConfirmsSwith = confirmSwitchTab()
    if (userConfirmsSwith) navigate("/")
    // else you don't do anything.
  }

  return (
    <>
      <LoadingBar
        color="blue"
        progress={progress}
        onLoaderFinished={() => setProgress(0)}
        waitingTime={800}
        loaderSpeed={100}
        height={4}
      />
      <ul
        style={{
          display: "flex",
          justifyContent: "space-around",
          listStyle: "none"
        }}
      >
        <li>
          <Link
            to="/"
            onClick={() => {
              onClick();
              setTimeout(() => setProgress(100), 500)
            }}
          >
            Home
          </Link>
        </li>
        <li>
          <Link
            to="/about"
            onClick={() => {
              onClick();
              setTimeout(() => setProgress(100), 500)
            }}
          >
            About
          </Link>
        </li>
      </ul>
    </>
  );
}

Answer 1

코드가 기본 링크 동작이 발생하는 것을 방지하지 않기 때문에 작동하지 않습니다. 링크를 클릭하면 연결된 onClick 핸들러가 다른 로직을 실행하는 동안 탐색 작업이 즉시 적용됩니다.

클릭 핸들러는 클릭 이벤트 객체를 사용하고 이에 대해 preventDefault를 호출하여 탐색 작업이 발생하지 않도록 해야 합니다.

으아악

Answer 2

onLeave 작동 방식에 대한 오해가 있다고 생각합니다 :-)

true를 반환하면 "나가기 작업을 확인"하지 않습니다. 그럼에도 불구하고 휴가 요청은 확인됩니다. onLeave 속성은 단순히 함수를 취하여 페이지를 떠날 때 이를 트리거합니다. 이 함수는 여기처럼 힌트가 될 수 있지만 반환된 값은 사용되지 않습니다.

성취하려는 작업은 페이지가 실제로 떠나기 전에 완료되어야 합니다. 앱 어딘가에 버튼을 클릭하여 실제로 페이지를 변경할 수 있는 탐색 메뉴가 있어야 합니다(보통

사용). 으아악

)

이제 이 기능을 사용해 보겠습니다.

비슷한 것이 있다고 가정해보세요

으아악

이 콜백에서 verifySwitchTab 함수를 호출하려고 합니다.

이렇게 바꾸시면 됩니다

으아악

도움이 되었으면 좋겠습니다. 제 질문이 틀렸다면 알려주세요!

건배

질문 수정 후

이것을 시도해 보세요:

으아악