Rezolvat: reacționează router Link-ul funcționează

Principala problemă legată de React Router Link este că nu actualizează corect istoricul browserului atunci când este făcut clic. Aceasta înseamnă că, dacă un utilizator face clic pe un Link și apoi apasă butonul Înapoi, va fi dus înapoi la pagina anterioară în loc de pagina din care tocmai a navigat. În plus, acest lucru poate provoca un comportament neașteptat în unele cazuri, cum ar fi atunci când utilizați șiruri de interogare sau fragmente hash.

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. import { BrowserRouter as Router, Route, Link } din „react-router-dom”;
// Această linie importă componentele BrowserRouter, Route și Link din biblioteca react-router-dom.

2.
// Această linie creează o componentă Router care va fi folosită pentru a crea rute pentru aplicația noastră.

3.

// Această linie creează un element div care va conține toate rutele și legăturile noastre.

4. Acasă
// Această linie creează un link către pagina de pornire a aplicației noastre cu textul „Acasă”.

5. Despre Noi
// Această linie creează un link către pagina despre a aplicației noastre cu textul „Despre”.

6.
// Această linie creează o rută pentru pagina de start a aplicației noastre și redă componenta Home atunci când este accesată de un utilizator.

7. //Această linie creează o rută pentru pagina despre a aplicației noastre și redă componenta Despre atunci când este accesată de un utilizator.

8.

//Acest lucru închide elementul nostru div care conține toate rutele și legăturile noastre

Link v6

Link v6 este o componentă nouă în React Router care oferă o soluție de navigare accesibilă și declarativă pentru aplicațiile React. Acesta înlocuiește componenta anterioară Link și oferă mai multe funcții și un suport mai bun pentru accesibilitate. Link v6 acceptă atât legături obișnuite, cât și rutare dinamică, permițând dezvoltatorilor să creeze experiențe de navigare puternice fără a fi nevoiți să gestioneze manual rutele sau să folosească biblioteci terțe. De asemenea, acceptă randarea pe partea de server, ceea ce permite dezvoltatorilor să creeze aplicații prietenoase cu SEO cu un efort minim. În cele din urmă, Link v6 are suport încorporat pentru urmărirea analizelor, ceea ce facilitează urmărirea interacțiunilor utilizatorilor cu aplicația dvs.

De ce React Router Link nu funcționează

Există mai multe motive posibile pentru care React Router Link nu funcționează în React Router. Cel mai frecvent motiv este că componenta la care este conectată nu este configurată sau configurată corespunzător. De exemplu, dacă componenta la care este legată nu a fost importată corect sau dacă calea rutei este incorectă, atunci React Router Link nu va funcționa. În plus, dacă există greșeli de scriere în calea rutei sau în numele componentei, acest lucru poate cauza, de asemenea, probleme cu React Router Link. În cele din urmă, dacă există conflicte între mai multe rute (cum ar fi două rute cu aceeași cale exactă), acest lucru poate cauza și probleme cu React Router Link.

Postări asemănatoare:

Lăsați un comentariu