Rozwiązany: reakcja routera dom IndexRedirect

Głównym problemem związanym z React Router DOM IndexRedirect jest to, że może powodować nieoczekiwane przekierowania. Dzieje się tak, ponieważ składnik IndexRedirect automatycznie przekierowuje użytkowników do określonej trasy, gdy uzyskują dostęp do głównego adresu URL witryny internetowej. Może to być mylące dla użytkowników, którzy spodziewają się zobaczyć stronę główną lub inną zawartość pod głównym adresem URL. Ponadto, jeśli użytkownik przeszedł już do określonej strony, a następnie odświeży przeglądarkę, może zostać nieoczekiwanie przekierowany poza tę stronę z powodu składnika IndexRedirect.

import { BrowserRouter as Router, Route, IndexRedirect } from "react-router-dom";

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

1. „zaimportuj { BrowserRouter as Router, Route, IndexRedirect } z „react-router-dom”;” – Ta linia importuje komponenty BrowserRouter, Route i IndexRedirect z biblioteki react-router-dom.

2. "” – Ta linia zawija wszystkie trasy w komponencie Router, który jest używany do konfigurowania tras dla aplikacji React.

3. "” – Ta linia wyznacza trasę ze ścieżką „/”. Wszelkie żądania do tej ścieżki będą obsługiwane przez tę trasę.

4. "” – Ta linia przekierowuje wszelkie żądania do ścieżki „/” do „/home”.

5. "” – Ta linia wyznacza trasę ze ścieżką „/home”. Wszelkie żądania do tej ścieżki będą obsługiwane przez komponent Home, który jest przekazywany jako argument do komponentu Route.

6. "” – Ta linia wyznacza trasę ze ścieżką „/about”. Wszelkie żądania do tej ścieżki będą obsługiwane przez komponent About, który jest przekazywany jako argument do komponentu Route.

7.”” i „” – Linie te zamykają odpowiednio trasy i komponenty routera

Co to jest IndexRedirect

IndexRedirect to komponent w React Router, który umożliwia przekierowanie z jednej trasy na drugą. Jest używany, gdy chcesz przekierować użytkownika z głównego adresu URL aplikacji na inną trasę. Na przykład, jeśli masz aplikację z głównym adresem URL „/”, możesz użyć IndexRedirect, aby przekierować użytkownika do „/home”, gdy odwiedza główny adres URL.

Jak zrobić IndexRedirect

IndexRedirect w React Router to sposób na przekierowanie użytkowników z głównego adresu URL aplikacji na inny adres URL. Może to być przydatne do kierowania użytkowników na najważniejszą stronę Twojej aplikacji lub do tworzenia landing page.

Aby zrobić IndexRedirect w React Router, musisz użyć składnik. Ten komponent wymaga dwóch rekwizytów: „to” i „push”. Właściwość „to” służy do określenia adresu URL, do którego mają być przekierowywani użytkownicy, podczas gdy właściwość „push” określa, czy historia przeglądarki powinna zostać zaktualizowana po wystąpieniu tego przekierowania (domyślnie prawda).

Na przykład, jeśli chcesz, aby użytkownicy odwiedzający Twój główny adres URL (np. www.example.com) byli przekierowywani do www.example.com/home, możesz użyć IndexRedirect w następujący sposób:

…inne trasy…