Išspręsta: „React Router Link“ veikia

Pagrindinė problema, susijusi su „React Router Link“, yra ta, kad spustelėjus ji tinkamai neatnaujina naršyklės istorijos. Tai reiškia, kad jei vartotojas spustelėja nuorodą ir tada paspaus atgal mygtuką, jis bus grąžintas į ankstesnį puslapį, o ne į puslapį, iš kurio ką tik nuėjo. Be to, kai kuriais atvejais tai gali sukelti netikėtą elgesį, pvz., naudojant užklausos eilutes arba maišos fragmentus.

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

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

1. importuoti { BrowserRouter as Router, Route, Link } iš „react-router-dom“;
// Ši eilutė importuoja BrowserRouter, Route ir Link komponentus iš react-router-dom bibliotekos.

2.
// Ši eilutė sukuria maršrutizatoriaus komponentą, kuris bus naudojamas mūsų programos maršrutams kurti.

3.

// Ši eilutė sukuria div elementą, kuriame bus visi mūsų maršrutai ir nuorodos.

4. Pagrindinis
// Ši eilutė sukuria nuorodą į pagrindinį mūsų programos puslapį su tekstu „Pagrindinis“.

5. Apie mus
// Ši eilutė sukuria nuorodą į mūsų programos apie puslapį su tekstu „Apie“.

6.
// Ši eilutė sukuria maršrutą mūsų programos pagrindiniam puslapiui ir pateikia pagrindinį komponentą, kai jį pasiekia vartotojas.

7. //Ši eilutė sukuria maršrutą apie mūsų programos puslapį ir pateikia komponentą Apie, kai jį pasiekia vartotojas.

8.

//Tai uždaro mūsų div elementą, kuriame yra visi mūsų maršrutai ir nuorodos

Nuoroda v6

„Link v6“ yra naujas „React Router“ komponentas, teikiantis deklaratyvų, prieinamą „React“ programų naršymo sprendimą. Jis pakeičia ankstesnį „Link“ komponentą ir suteikia daugiau funkcijų bei geresnį prieinamumo palaikymą. „Link v6“ palaiko ir įprastas nuorodas, ir dinaminį maršruto parinkimą, todėl kūrėjai gali sukurti galingą navigacijos patirtį, nereikalaujant rankiniu būdu tvarkyti maršrutų ar naudoti trečiųjų šalių bibliotekų. Jis taip pat palaiko serverio pusės atvaizdavimą, kuris leidžia kūrėjams sukurti SEO palankias programas su minimaliomis pastangomis. Galiausiai, „Link v6“ turi integruotą analizės stebėjimo palaikymą, todėl lengviau stebėti vartotojo sąveiką su programa.

Kodėl „React Router Link“ neveikia

Yra keletas galimų priežasčių, kodėl „React Router Link“ neveikia „React Router“. Dažniausia priežastis yra ta, kad komponentas, su kuriuo susieta, nėra tinkamai sukonfigūruotas arba nustatytas. Pavyzdžiui, jei komponentas, su kuriuo susieta, buvo importuotas neteisingai arba jei maršruto kelias yra neteisingas, React Router Link neveiks. Be to, jei maršruto kelyje arba komponento pavadinime yra rašybos klaidų, tai taip pat gali sukelti problemų su „React Router Link“. Galiausiai, jei yra kokių nors konfliktų tarp kelių maršrutų (pvz., dviejų maršrutų su tuo pačiu tikslu), tai taip pat gali sukelti problemų su „React Router Link“.

Susijusios naujienos:

Palikite komentarą