Vlastní výzva React Router

Jak implementovat vlastní výzvu při navigaci pomocí respond-router

K čemu je potřeba vlastní výzva?

Většina projektů reakce se u svých komponent řídí systémem návrhu uživatelského rozhraní. Aby dosáhli stejné konzistence designu v celé aplikaci, znovu používají komponenty. Chcete-li však zablokovat navigaci v případě, že existují nějaká neuložená uživatelská data, je výchozí výzva prohlížeče nejběžnějším a nejjednodušším způsobem, jak uživateli zablokovat navigaci na různé trasy. Vyskakovací okno však neodpovídá komponentě vaší knihovny.

Neexistuje žádný oficiální dokument, který by výslovně zmiňoval, jak používat vlastní modal namísto výchozího react-router Výzva .

Řešení

K dosažení požadovaného výsledku je třeba dodržet několik jednoduchých kroků. Každý krok obsahuje 100 % funkčních fragmentů kódu. Můžete jej použít ve svých projektech.

Krok 1

Musíme zakázat nebo zablokovat výchozí výzvu prohlížeče. To lze provést předáním prázdného zpětného volání do getUserConfirmation funkční podpěra BrowserRouter .

Krok 2

Nyní vytvoříme vlastní RouterPrompt komponentu pomocí useHistory háček z knihovny komponent pro návrh prvků Reag-router-dom a ant pro Modal komponenta.

Krok 3

Vytvořme dvě ukázkové komponenty pro navigaci mezi stránkami. Nechte například první komponentu Dashboard.jsx a druhá složka je Home.jsx .

Komponenta Home obsahuje náš vlastní RouterPrompt komponent. Výzva se spustí při změně stránky a také na základě when podpěra. Prop když se používá k podmíněnému spuštění výzvy. Například pokud je prop nastavena na true , výzva se zobrazí při každé navigaci stránky (z domovské trasy na jiné trasy nebo navigace vpřed/zpět).

onOK a onCancel rekvizity zpětného volání musí vrátit booleovskou hodnotu, aby mohly pokračovat v cestě.

Výsledek

Závěr

Můžete použít modal libovolné knihovny komponent, dokonce i svůj vlastní modální nebo výchozí výzvu prohlížeče. Ale buďte opatrní při implementaci history.block .

Dodržením výše uvedených kroků můžete dosáhnout požadovaného řešení. Kód je 100% funkční. Úryvky kódu můžete zkopírovat do svých aplikací, abyste ušetřili čas.

Odkazy

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