Ia tidak berfungsi kerana kod itu tidak menghalang tindakan pautan lalai daripada berlaku. Apabila pautan diklik, tindakan navigasi akan berkuat kuasa serta-merta semasa pengendali onClick yang dilampirkan menjalankan logik lain.

Pengendali klik juga harus menggunakan objek acara klik dan panggil preventDefault padanya untuk menghentikan tindakan navigasi daripada berlaku.

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

  function confirmSwitchTab() {
    //Prompt the user with a confirm message.
    return confirm("Are you sure you want to switch tabs?");
  }

  const clickHandler = (target = "/") => (e) => {
    e.preventDefault(); //  setProgress(100), 500);

    if (confirmSwitchTab()) {
      navigate(target);
    }
    // else you don't do anything.
  }

  return (
    
      
      

• Home
• About

Saya percaya terdapat salah faham di sini tentang cara onLeave berfungsi :-)

Membalas benar tidak akan "mengesahkan operasi cuti". Apapun, permintaan cuti akan disahkan. Atribut onLeave hanya akan mengambil fungsi dan mencetuskannya apabila anda meninggalkan halaman. Fungsi ini boleh menjadi petunjuk, seperti di sini, tetapi nilai yang dikembalikan tidak akan digunakan.

Apa yang anda ingin capai mesti diselesaikan sebelum halaman itu benar-benar keluar. Di suatu tempat dalam apl anda, anda sepatutnya mempunyai menu navigasi di mana anda sebenarnya boleh menukar halaman dengan mengklik butang (biasanya menggunakan

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

)

Sekarang di sinilah anda akan menggunakan fungsi tersebut.

Andaikan anda mempunyai sesuatu yang serupa

Home

Anda ingin memanggil fungsi confirmSwitchTab dalam panggilan balik ini.

Anda boleh menukarnya kepada sesuatu seperti ini

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

Semoga ini membantu, sila beritahu saya jika soalan saya salah!

Sola

Selepas mengedit soalan

Cuba ini:

import { React, useState } from "react";
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 = (path) => {
    setTimeout(() => setProgress(100), 500)
    const userConfirmsSwith = confirmSwitchTab()
    if (userConfirmsSwith) navigate(path)
    // else you don't do anything.
  }
  return (
    
       setProgress(0)}
        waitingTime={800}
        loaderSpeed={100}
        height={4}
      />
      

        

           {onClick("/")}>
            Home
          
        
        

           {onClick("/about")}>
            About
          
        
      
    >
  );
}