Vyřešeno: reagovat router dom IndexRedirect

Hlavním problémem souvisejícím s React Router DOM IndexRedirect je to, že může způsobit neočekávaná přesměrování. Je to proto, že komponenta IndexRedirect automaticky přesměruje uživatele na zadanou trasu, když přistupují ke kořenové adrese URL webu. To může být matoucí pro uživatele, kteří očekávají, že uvidí domovskou stránku nebo jiný obsah na kořenové adrese URL. Navíc, pokud uživatel již přešel na určitou stránku a poté obnovil svůj prohlížeč, může být neočekávaně přesměrován pryč z této stránky kvůli komponentě 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. „import { BrowserRouter as Router, Route, IndexRedirect } z 'react-router-dom';“ – Tento řádek importuje komponenty BrowserRouter, Route a IndexRedirect z knihovny respond-router-dom.

2. "” – Tento řádek zabalí všechny cesty do komponenty Router, která se používá k nastavení směrování pro aplikaci React.

3. "” – Tento řádek nastavuje cestu s cestou '/'. Veškeré požadavky na tuto cestu budou zpracovány touto cestou.

4. "” – Tento řádek přesměruje všechny požadavky na cestu '/' na '/home'.

5. "” – Tento řádek nastavuje trasu s cestou '/home'. Jakékoli požadavky na tuto cestu budou zpracovány komponentou Home, která je předána jako argument komponentě Route.

6. "” – Tento řádek nastavuje trasu s cestou '/about'. Jakékoli požadavky na tuto cestu budou zpracovány komponentou About, která je předána jako argument komponentě Route.

7.““ a „“ – Tyto řádky uzavírají obě trasy a komponenty směrovače

Co je IndexRedirect

IndexRedirect je komponenta v React Router, která umožňuje přesměrování z jedné trasy na druhou. Používá se, když chcete uživatele přesměrovat z kořenové adresy URL vaší aplikace na jinou cestu. Pokud máte například aplikaci s kořenovou adresou URL „/“, můžete použít IndexRedirect k přesměrování uživatele na „/home“, když navštíví kořenovou adresu URL.

Jak udělat IndexRedirect

IndexRedirect v React Router je způsob, jak přesměrovat uživatele z kořenové adresy URL vaší aplikace na jinou adresu URL. To může být užitečné pro nasměrování uživatelů na nejdůležitější stránku vaší aplikace nebo pro vytvoření vstupní stránky.

Chcete-li provést IndexRedirect v React Router, musíte použít součástka. Tato komponenta má dvě rekvizity: „to“ a „push“. Podpěra „to“ se používá k určení adresy URL, na kterou mají být uživatelé přesměrováni, zatímco podložka „push“ určuje, zda se má či nemá aktualizovat historie prohlížeče, když dojde k tomuto přesměrování (ve výchozím nastavení pravda).

Pokud například chcete, aby uživatelé, kteří navštíví vaši kořenovou adresu URL (např. www.example.com), byli přesměrováni na www.example.com/home, můžete použít IndexRedirect takto:

… jiné cesty…