Solucionat: l'enllaç del router de reacció funciona

El principal problema relacionat amb React Router Link és que no actualitza correctament l'historial del navegador quan es fa clic. Això vol dir que si un usuari fa clic a un enllaç i després prem el botó enrere, es portarà de nou a la pàgina anterior en lloc de la pàgina de la qual acaba de navegar. A més, això pot provocar un comportament inesperat en alguns casos, com ara quan s'utilitzen cadenes de consulta o fragments 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. importa { BrowserRouter com a router, ruta, enllaç } de "react-router-dom";
// Aquesta línia importa els components BrowserRouter, Route i Link de la biblioteca react-router-dom.

2.
// Aquesta línia crea un component d'encaminador que s'utilitzarà per crear rutes per a la nostra aplicació.

3.

// Aquesta línia crea un element div que contindrà totes les nostres rutes i enllaços.

4. Home
// Aquesta línia crea un enllaç a la pàgina d'inici de la nostra aplicació amb el text 'Inici'.

5. Qui som?
// Aquesta línia crea un enllaç a la pàgina "sobre" de la nostra aplicació amb el text "Sobre".

6.
// Aquesta línia crea una ruta per a la pàgina d'inici de la nostra aplicació i representa el component Inici quan hi accedeix un usuari.

7. //Aquesta línia crea una ruta per a la pàgina sobre de la nostra aplicació i representa el component About quan un usuari hi accedeix.

8.

//Això tanca el nostre element div que conté totes les nostres rutes i enllaços

Enllaç v6

Link v6 és un nou component de React Router que proporciona una solució de navegació accessible i declarativa per a les aplicacions de React. Substitueix el component d'enllaç anterior i ofereix més funcions i un millor suport per a l'accessibilitat. Link v6 admet tant enllaços regulars com encaminament dinàmic, cosa que permet als desenvolupadors crear experiències de navegació potents sense haver de gestionar les rutes manualment ni utilitzar biblioteques de tercers. També admet la representació del costat del servidor, que permet als desenvolupadors crear aplicacions compatibles amb SEO amb un esforç mínim. Finalment, Link v6 té suport integrat per al seguiment analític, cosa que facilita el seguiment de les interaccions dels usuaris amb la vostra aplicació.

Per què React Router Link no funciona

Hi ha diversos motius possibles pels quals React Router Link no funciona a React Router. El motiu més comú és que el component al qual s'enllaça no està configurat o configurat correctament. Per exemple, si el component al qual s'enllaça no s'ha importat correctament, o si la ruta de ruta és incorrecta, React Router Link no funcionarà. A més, si hi ha errors ortogràfics al camí de la ruta o al nom del component, això també pot causar problemes amb React Router Link. Finalment, si hi ha conflictes entre diverses rutes (com ara dues rutes amb el mateix camí exacte), això també pot causar problemes amb React Router Link.

Articles Relacionats:

Deixa el teu comentari