Išspręsta: react router dom IndexRedirect

Pagrindinė problema, susijusi su React Router DOM IndexRedirect, yra ta, kad jis gali sukelti netikėtų peradresavimų. Taip yra todėl, kad komponentas IndexRedirect automatiškai nukreipia vartotojus į nurodytą maršrutą, kai jie pasiekia pagrindinį svetainės URL. Tai gali suklaidinti vartotojus, kurie pagrindiniame URL tikisi pamatyti pagrindinį puslapį ar kitą turinį. Be to, jei vartotojas jau nuėjo į konkretų puslapį ir atnaujina naršyklę, jis gali būti netikėtai nukreiptas iš to puslapio dėl IndexRedirect komponento.

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. „importuoti { BrowserRouter as Router, Route, IndexRedirect } iš 'react-router-dom';“ – Ši eilutė importuoja „BrowserRouter“, „Route“ ir „IndexRedirect“ komponentus iš „react-router-dom“ bibliotekos.

2. "” – ši eilutė aptraukia visus maršrutus maršrutizatoriaus komponente, kuris naudojamas „React“ programos maršruto nustatymui.

3. "” – šioje eilutėje nustatomas maršrutas, kurio kelias yra „/“. Visos užklausos šiuo keliu bus tvarkomos šiuo maršrutu.

4. "” – ši eilutė nukreipia visas užklausas į „/“ kelią į „/home“.

5. "” – Ši eilutė nustato maršrutą, kurio kelias yra „/namai“. Visos užklausos šiuo keliu bus apdorojamos pagrindinio komponento, kuris perduodamas kaip argumentas Maršruto komponentui.

6. "” – šioje eilutėje nustatomas maršrutas, kurio kelias yra „/apie“. Visos užklausos šiuo keliu bus apdorojamos komponentu Apie, kuris perduodamas kaip argumentas Maršruto komponentui.

7.“ ir „“ – šios linijos atitinkamai uždaro ir maršrutus, ir maršrutizatoriaus komponentus

Kas yra „IndexRedirect“.

„IndexRedirect“ yra „React Router“ komponentas, leidžiantis peradresuoti iš vieno maršruto į kitą. Jis naudojamas, kai norite nukreipti vartotoją iš šakninio programos URL į kitą maršrutą. Pavyzdžiui, jei turite programą, kurios šakninis URL yra „/“, galite naudoti „IndexRedirect“, kad nukreiptumėte vartotoją į „/home“, kai jis apsilanko pagrindiniame URL.

Kaip atlikti „IndexRedirect“.

„IndexRedirect“ programoje „React Router“ yra būdas nukreipti vartotojus iš jūsų programos šakninio URL į kitą URL. Tai gali būti naudinga nukreipiant vartotojus į svarbiausią programos puslapį arba kuriant nukreipimo puslapį.

Norėdami atlikti „IndexRedirect“ naudodami „React Router“, turite naudoti komponentas. Šiam komponentui reikia dviejų rekvizitų: „to“ ir „stumti“. Rekvizitas „į“ naudojamas nurodyti URL, į kurį norite, kad vartotojai būtų peradresuojami, o „push“ pasiūlymas nustato, ar naršyklės istorija turi būti atnaujinta, kai įvyksta šis peradresavimas (pagal numatytuosius nustatymus).

Pavyzdžiui, jei norite, kad naudotojai, apsilankę jūsų šakniniame URL (pvz., www.example.com), būtų nukreipti į www.example.com/home, galite naudoti „IndexRedirect“ kaip ši:

... kiti maršrutai ...