Løst: React router Link fungerer

Hovedproblemet knyttet til React Router Link er at den ikke oppdaterer nettleserens historie på riktig måte når den klikkes. Dette betyr at hvis en bruker klikker på en lenke og deretter trykker tilbake-knappen, vil de bli tatt tilbake til forrige side i stedet for siden de nettopp har navigert bort fra. I tillegg kan dette føre til uventet oppførsel i noen tilfeller, for eksempel ved bruk av søkestrenger eller hash-fragmenter.

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. importer { BrowserRouter som ruter, rute, lenke } fra "react-router-dom";
// Denne linjen importerer BrowserRouter, Route og Link-komponentene fra react-router-dom-biblioteket.

2.
// Denne linjen lager en ruterkomponent som vil bli brukt til å lage ruter for applikasjonen vår.

3.

// Denne linjen lager et div-element som vil inneholde alle våre ruter og lenker.

4. Hjemprodukt
// Denne linjen oppretter en lenke til hjemmesiden til applikasjonen vår med teksten "Hjem".

5. Om oss
// Denne linjen oppretter en lenke til om-siden i applikasjonen vår med teksten "Om".

6.
// Denne linjen oppretter en rute for hjemmesiden til applikasjonen vår og gjengir Home-komponenten når en bruker får tilgang til den.

7. //Denne linjen oppretter en rute for Om-siden til applikasjonen vår og gjengir Om-komponenten når den åpnes av en bruker.

8.

//Dette stenger div-elementet vårt som inneholder alle våre ruter og lenker

Link v6

Link v6 er en ny komponent i React Router som gir en deklarativ, tilgjengelig navigasjonsløsning for React-applikasjoner. Den erstatter den forrige Link-komponenten og gir flere funksjoner og bedre støtte for tilgjengelighet. Link v6 støtter både vanlige lenker så vel som dynamisk ruting, slik at utviklere kan lage kraftige navigasjonsopplevelser uten å måtte administrere ruter manuelt eller bruke tredjepartsbiblioteker. Den støtter også gjengivelse på serversiden, som lar utviklere lage SEO-vennlige applikasjoner med minimal innsats. Endelig har Link v6 innebygd støtte for analysesporing, noe som gjør det enklere å spore brukerinteraksjoner med applikasjonen din.

Hvorfor React Router Link ikke fungerer

Det er flere mulige årsaker til at React Router Link ikke fungerer i React Router. Den vanligste årsaken er at komponenten som kobles til ikke er riktig konfigurert eller satt opp. For eksempel, hvis komponenten som kobles til ikke har blitt importert riktig, eller hvis rutebanen er feil, vil ikke React Router Link fungere. I tillegg, hvis det er noen skrivefeil i rutebanen eller komponentnavnet, kan dette også forårsake problemer med React Router Link. Til slutt, hvis det er noen konflikter mellom flere ruter (for eksempel to ruter med samme nøyaktige bane), kan dette også forårsake problemer med React Router Link.

Relaterte innlegg:

Legg igjen en kommentar