Przekierowania w kosmicznej nawigacji

W przestrzeni międzygwiezdnej czasami musimy natychmiast przekierować nasz statek na inną trasę. W świecie React Router, przekierowania działają podobnie - pozwalają nam przenieść użytkownika z jednej ścieżki na drugą automatycznie.

Komponent Navigate

Najprostszym sposobem na utworzenie przekierowania jest użycie komponentu

Navigate

z React Router:

1import { Navigate } from 'react-router-dom';
2
3function RedirectToControl() {
4  return <Navigate to="/control-center" />;
5}

Gdy ten komponent jest renderowany, użytkownik zostanie automatycznie przekierowany na wskazaną ścieżkę. Jest to deklaratywny sposób na przekierowanie - po prostu umieszczasz komponent w drzewie JSX.

Przekierowania warunkowe

Często potrzebujemy przekierować użytkownika tylko w określonych warunkach, na przykład gdy nie jest zalogowany:

1function SecretMoonBase() {
2  const isAstronaut = useAuth();
3  
4  if (!isAstronaut) {
5    return <Navigate to="/access-denied" replace />;
6  }
7  
8  return (
9    <div>
10      <h1>Tajna baza księżycowa</h1>
11      <p>Witaj astronauto! Masz dostęp do tajnych danych.</p>
12    </div>
13  );
14}

Atrybut

replace

sprawia, że przekierowanie zastępuje bieżącą stronę w historii przeglądarki, zamiast dodawać nową. Dzięki temu użytkownik nie trafi z powrotem na chronioną stronę po kliknięciu przycisku "wstecz".

Przekierowania programowe

Czasami potrzebujemy przekierować użytkownika w odpowiedzi na jakieś zdarzenie, jak przesłanie formularza. Używamy wtedy hooka

useNavigate

:

1import { useNavigate } from 'react-router-dom';
2
3function LaunchControlForm() {
4  const navigate = useNavigate();
5  
6  const handleLaunch = (event) => {
7    event.preventDefault();
8    // Logika przygotowania startu...
9    
10    // Przekierowanie do strony odliczania
11    navigate('/countdown');
12    
13    // Lub z parametrem replace
14    // navigate('/countdown', { replace: true });
15  };
16  
17  return (
18    <form onSubmit={handleLaunch}>
19      <h2>Panel kontroli startu</h2>
20      <button type="submit">Rozpocznij odliczanie</button>
21    </form>
22  );
23}

Obsługa nieistniejących ścieżek (404)

React Router pozwala nam łatwo obsłużyć przypadek, gdy użytkownik próbuje odwiedzić ścieżkę, która nie istnieje:

1<Routes>
2  <Route path="/mission-control" element={<MissionControl />} />
3  <Route path="/navigation" element={<Navigation />} />
4  <Route path="*" element={<Navigate to="/lost-in-space" />} />
5</Routes>

Ścieżka

*

dopasowuje się do każdej trasy, która nie pasuje do żadnej z poprzednich. Zamiast

Navigate

możemy również wyrenderować komponent 404:

1<Route path="*" element={<LostInSpace />} />

Przekierowania z parametrami

Możemy również przekazać dodatkowe dane podczas przekierowania:

1// Przekierowanie deklaratywne z parametrami
2<Navigate 
3  to="/asteroid-alert" 
4  state={{ severity: "high", location: "sector-7" }} 
5/>
6
7// Przekierowanie programowe z parametrami
8navigate('/asteroid-alert', { 
9  state: { severity: "high", location: "sector-7" } 
10});

W komponencie docelowym możemy odczytać te dane za pomocą hooka

useLocation

:

1import { useLocation } from 'react-router-dom';
2
3function AsteroidAlert() {
4  const location = useLocation();
5  const { severity, location: asteroidLocation } = location.state || {};
6  
7  return (
8    <div className="alert">
9      <h1>⚠️ Ostrzeżenie o asteroidzie!</h1>
10      {severity && asteroidLocation && (
11        <p>
12          Wykryto asteroidę o zagrożeniu {severity} w lokalizacji {asteroidLocation}.
13        </p>
14      )}
15    </div>
16  );
17}

Przekierowania z uwierzytelnianiem

Najczęstszym przypadkiem użycia przekierowań jest ochrona tras przed nieuprawnionymi użytkownikami:

1function ProtectedRoute({ children }) {
2  const { user, loading } = useAuth();
3  
4  if (loading) {
5    return <LoadingSpinner />;
6  }
7  
8  if (!user) {
9    // Przekierowanie do strony logowania z zapisaniem oryginalnej ścieżki
10    return <Navigate to="/login" state={{ from: location.pathname }} />;
11  }
12  
13  return children;
14}
15
16// Użycie:
17<Routes>
18  <Route path="/mission-control" element={
19    <ProtectedRoute>
20      <MissionControl />
21    </ProtectedRoute>
22  } />
23</Routes>

Na stronie logowania możemy odczytać oryginalną ścieżkę i przekierować z powrotem po zalogowaniu:

1function Login() {
2  const navigate = useNavigate();
3  const location = useLocation();
4  const from = location.state?.from || '/dashboard';
5  
6  const handleLogin = async (credentials) => {
7    const success = await loginUser(credentials);
8    
9    if (success) {
10      // Przekierowanie z powrotem do oryginalnej strony
11      navigate(from, { replace: true });
12    }
13  };
14  
15  // Reszta komponentu...
16}

Podsumowanie

Przekierowania są potężnym narzędziem w aplikacjach React wykorzystujących React Router. Pozwalają na:

1. Automatyczne przenoszenie użytkowników między ścieżkami
2. Tworzenie chronionych stref wymagających uwierzytelnienia
3. Obsługę nieistniejących ścieżek (404)
4. Przekazywanie danych między stronami podczas przekierowania

Pamiętaj, aby używać parametru

replace

gdy chcesz zapobiec powrotowi użytkownika do poprzedniej strony za pomocą przycisku "wstecz" - jest to szczególnie ważne w przypadku stron logowania i innych scenariuszy uwierzytelniania.