Ratkaistu: React router Link toimii

React Router Linkin suurin ongelma on, että se ei päivitä selaimen historiaa kunnolla, kun sitä napsautetaan. Tämä tarkoittaa, että jos käyttäjä napsauttaa linkkiä ja painaa sitten Takaisin-painiketta, hänet ohjataan takaisin edelliselle sivulle sen sivun sijaan, jolta hän juuri siirtyi pois. Lisäksi tämä voi joissain tapauksissa aiheuttaa odottamatonta toimintaa, kuten kyselymerkkijonoja tai hash-fragmentteja käytettäessä.

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. tuo { BrowserRouter as Router, Route, Link } kohdasta "react-router-dom";
// Tämä rivi tuo BrowserRouter-, Route- ja Link-komponentit react-router-dom-kirjastosta.

2.
// Tämä rivi luo reititinkomponentin, jota käytetään reittien luomiseen sovelluksellemme.

3.

//Tämä sulkee div-elementtimme, joka sisältää kaikki reitit ja linkit

Linkki v6

Link v6 on React Routerin uusi komponentti, joka tarjoaa ilmoittavan, helppokäyttöisen navigointiratkaisun React-sovelluksille. Se korvaa aiemman Link-komponentin ja tarjoaa enemmän ominaisuuksia ja paremman tuen saavutettavuudelle. Link v6 tukee sekä tavallisia linkkejä että dynaamista reititystä, jolloin kehittäjät voivat luoda tehokkaita navigointikokemuksia ilman, että heidän tarvitsee hallita reittejä manuaalisesti tai käyttää kolmannen osapuolen kirjastoja. Se tukee myös palvelinpuolen renderöintiä, jonka avulla kehittäjät voivat luoda SEO-ystävällisiä sovelluksia pienellä vaivalla. Lopuksi Link v6:ssa on sisäänrakennettu tuki analytiikan seurannalle, mikä helpottaa käyttäjien vuorovaikutuksen seurantaa sovelluksesi kanssa.

Miksi React Router Link ei toimi

On useita mahdollisia syitä, miksi React Router Link ei toimi React Routerissa. Yleisin syy on, että komponenttia, johon linkitetään, ei ole määritetty tai asetettu oikein. Jos esimerkiksi linkitettävää komponenttia ei ole tuotu oikein tai jos reittipolku on väärä, React Router Link ei toimi. Lisäksi, jos reittipolussa tai komponentin nimessä on kirjoitusvirheitä, tämä voi myös aiheuttaa ongelmia React Router Linkin kanssa. Lopuksi, jos useiden reittien välillä on ristiriitoja (kuten kaksi reittiä, joilla on sama tarkka polku), tämä voi myös aiheuttaa ongelmia React Router Linkin kanssa.