Rozwiązany: przekierowanie z routerem reagującym v6

Głównym problemem związanym z przekierowaniem za pomocą React Router v6 jest to, że komponent nie renderuje się ponownie po wystąpieniu przekierowania. Oznacza to, że żaden stan ani rekwizyty powiązane z komponentem nie zostaną zaktualizowane po wystąpieniu przekierowania, a zmiany wprowadzone w tych wartościach nie zostaną odzwierciedlone na nowej stronie. Dodatkowo, ponieważ React Router v6 nie obsługuje ciągów zapytań, wszelkie parametry zapytania przekazane w adresie URL również zostaną utracone podczas przekierowania.

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. Ta linia importuje komponent Redirect z biblioteki react-router-dom.

2. Ta linia renderuje komponent Redirect, który przekieruje użytkownika do trasy „/home”.

Jak mogę przekierować w React Router v6

v6

React Router v6 udostępnia nowy komponent o nazwie których można użyć do przekierowania użytkowników z jednej strony na drugą. Aby z niego skorzystać, wystarczy zaimportować komponent Redirect z pakietu react-router-dom, a następnie użyć go w konfiguracji trasy. Gdy użytkownik odwiedzi ścieżkę określoną we właściwości „od”, zostanie przekierowany do ścieżki określonej we właściwości „do”. Na przykład:

importuj { przekierowanie } z „react-router-dom”;
} />

Jak przekierować w reakcji na router v6 po zalogowaniu

Przekierowanie po udanym zalogowaniu to powszechna funkcja w aplikacjach internetowych. W React Router v6 możesz użyć komponent przekierowujący użytkownika po pomyślnym zalogowaniu.

Aby to zrobić, musisz utworzyć trasę, która sprawdza, czy użytkownik jest zalogowany, a następnie odpowiednio go przekierowuje. Na przykład:

{
if (jest zalogowany) {
powrót ;
} Else {
powrót ;
}
}} />

W tym przykładzie sprawdzamy, czy użytkownik jest zalogowany, a następnie renderujemy komponent LoginPage lub przekierowujemy go do /dashboard. Możesz także przekazać rekwizyty do komponentu Redirect w następujący sposób: Pozwala to śledzić, gdzie znajdował się użytkownik przed przekierowaniem.

Jak automatycznie przekierować w reakcji

React Router udostępnia komponent Redirect, którego można użyć do automatycznego przekierowania użytkowników po spełnieniu określonych warunków. Aby z niego skorzystać, musisz podać ścieżkę, na którą chcesz przekierować, jako rekwizyt. W razie potrzeby możesz również przekazać obiekt z parametrami stanu i/lub zapytania.

Aby automatycznie przekierować, musisz użyć komponentu w komponencie Trasa i ustawić warunek, kiedy przekierowanie powinno nastąpić. Na przykład, jeśli chcesz przekierować użytkowników ze strony głównej swojej aplikacji na stronę logowania po kliknięciu w link, możesz zrobić coś takiego:

{jest zalogowany? : }

W tym przykładzie używamy zmiennej boolowskiej isLoggedIn (która musiałaby być ustawiona gdzie indziej) jako naszego warunku, kiedy powinniśmy wykonać przekierowanie. Jeśli to prawda, renderujemy nasz komponent Home; w przeciwnym razie wykonujemy przekierowanie.

Jak przekierować po 5 sekundach w reakcji

Aby przekierować po 5 sekundach w React Router, możesz użyć funkcji setTimeout() do wywołania metody history.push() z żądaną trasą jako argumentem.

Przykład:
import { useHistory } z „react-router-dom”;
const historia = useHistoria();
setTimeout(() => {
historia.push("/redirectedPage");
}, dziesięć tysięcy);