Tepki-yönlendirici kullanarak navigasyonda özel bilgi istemi nasıl uygulanır?

Özel bilgi istemine ne gerek var?

Tepki projelerinin çoğu, bileşenleri için UI tasarım sistemini takip eder . Uygulama genelinde aynı tasarım tutarlılığını elde etmek için bileşenleri yeniden kullanırlar. Ancak, kaydedilmemiş bazı kullanıcı verileri olması durumunda navigasyonu engellemek için, varsayılan tarayıcı istemi, kullanıcının farklı rotalara gitmesini engellemenin en yaygın ve kolay yoludur. Ancak açılır pencere, kitaplık bileşeninizle eşleşmiyor.

Varsayılan react-router Prompt yerine özel modun nasıl kullanılacağını açıkça belirten resmi bir belge yoktur .

Çözüm

İstenilen sonucu elde etmek için izlenmesi gereken birkaç basit adım vardır. Her adım %100 çalışan kod parçacıkları içerir. Projelerinizde kullanabilirsiniz.

Aşama 1

Varsayılan tarayıcı istemini devre dışı bırakmamız veya engellememiz gerekiyor. Bu getUserConfirmation, BrowserRouter'ın işlev prop'una boş bir geri çağırma iletilerek yapılabilir .

Adım 2

Şimdi RouterPromptbileşen useHistoryiçin react-router-domand ant tasarım bileşen kitaplığındaki kancayı kullanarak özel bir bileşen oluşturalım modal.

history.blockBize geçerli sayfadan navigasyon away engellenmesine neden olurlar. Boş işlevin veya boş argümanların blok yöntemine iletilmesi, gezinme ile devam eder, onu engellemez veya kesmez.

useEffectKullanarak ya da göstermek için olup hızlı başlangıç durumunu işlemek için kullanılan whensahne.

handleOKVe handleCancelgeri aramalar teyit ve navigasyon iptal kontrol etmek için kullanılır.

Aşama 3

Sayfalar arasında gezinmek için iki örnek bileşen oluşturalım. Örneğin, birinci bileşen Dashboard.jsxve ikinci bileşen olsun Home.jsx.

homeBileşen bizim özel içeriyor RouterPromptbileşeni. İstem, sayfa değişikliğinde ve ayrıca whenprop'a dayalı olarak tetiklenir . whenProp şartlı istemi tetiklemek için kullanılır. Örneğin, whenpervane olarak ayarlanırsa true, sayfa her gezindiğinde (ev rotasından diğer rotalara veya ileri / geri gidin) istem gösterilecektir.

onOKVe onCancelgeri arama sahne rota ile devam etmek için boolean değeri dönmelidir.

Sonuç

Sonuç

Herhangi bir bileşen kitaplığının kipini, kendi özel kipinizi veya varsayılan tarayıcı isteminizi bile kullanabilirsiniz. Ancak uygularken dikkatli olun history.block.

Yukarıdaki adımları takip ederek istediğiniz çözüme ulaşabilirsiniz. Kod %100 çalışıyor. Zaman kazanmak için kod parçacıklarını uygulamalarınıza kopyalayabilirsiniz.

Referanslar

1. https://reactrouter.com/web/api/Hooks/usehistory
2. https://reactrouter.com/web/api/history